已删除2个文件
已修改26个文件
已添加566个文件
| | |
|---|
| | | name: 'permission', |
|---|
| | | component: () => import('@/views/system/Permission.vue') |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | path: '/permissionPDA', |
|---|
| | | name: 'permissionPDA', |
|---|
| | | component: () => import('@/views/system/PermissionPDA.vue') |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: '/Sys_Dictionary', |
|---|
| | | name: 'Sys_Dictionary', |
|---|
| | |
|---|
| | | path: '/materielInfo', |
|---|
| | | name: 'materielInfo', |
|---|
| | | component: () => import('@/views/basic/materielInfo.vue') |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: '/cachePoint', |
|---|
| | | name: 'cachePoint', |
|---|
| | |
|---|
| | | path: '/task', |
|---|
| | | name: 'task', |
|---|
| | | component: () => import('@/views/taskinfo/task.vue') |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: '/task_hty', |
|---|
| | | name: 'task_hty', |
|---|
| | | component: () => import('@/views/taskinfo/task_hty.vue') |
|---|
| | | },{ |
|---|
| | | }, { |
|---|
| | | path: '/stockView', |
|---|
| | | name: 'stockView', |
|---|
| | | component: () => import('@/views/stock/stockView.vue') |
|---|
| | | },{ |
|---|
| | | }, { |
|---|
| | | path: '/StockQuantityChangeRecord', |
|---|
| | | name: 'StockQuantityChangeRecord', |
|---|
| | | component: () => import('@/views/record/stockQuantityChangeRecord.vue') |
|---|
| | | },{ |
|---|
| | | }, { |
|---|
| | | path: '/locationStatusChangeRecord', |
|---|
| | | name: 'locationStatusChangeRecord', |
|---|
| | | component: () => import('@/views/record/locationStatusChangeRecord.vue') |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="role-container"> |
|---|
| | | <div class="role-tree-left flex-col"> |
|---|
| | | <div class="title"><i class="el-icon-user"></i>è§è²å表</div> |
|---|
| | | <el-scrollbar class="el-role-list"> |
|---|
| | | <el-tree |
|---|
| | | :data="tree" |
|---|
| | | @node-click="nodeClick" |
|---|
| | | node-key="id" |
|---|
| | | :default-expanded-keys="openKeys" |
|---|
| | | :expand-on-click-node="false" |
|---|
| | | style="padding: 5px 0; margin-right: 2px" |
|---|
| | | > |
|---|
| | | <template #default="{ data }"> |
|---|
| | | <div class="action-group"> |
|---|
| | | <div class="action-text"> |
|---|
| | | {{ data.roleName }} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | </el-tree> |
|---|
| | | </el-scrollbar> |
|---|
| | | </div> |
|---|
| | | <div class="role-tree-right flex-col"> |
|---|
| | | <div class="title"> |
|---|
| | | <div><i class="el-icon-folder-opened"></i>PDAèåæé</div> |
|---|
| | | <el-button type="primary" @click="save">ä¿å</el-button> |
|---|
| | | </div> |
|---|
| | | <el-scrollbar class="el-role-list"> |
|---|
| | | <el-tree |
|---|
| | | ref="eltreerole" |
|---|
| | | @check-change="leftCheckChange" |
|---|
| | | @check="nodeCheck" |
|---|
| | | :data="roleTree" |
|---|
| | | :show-checkbox="false" |
|---|
| | | style="padding: 15px" |
|---|
| | | node-key="id" |
|---|
| | | default-expand-all |
|---|
| | | :expand-on-click-node="false" |
|---|
| | | > |
|---|
| | | <template #default="{ data }"> |
|---|
| | | <div class="action-group"> |
|---|
| | | <div |
|---|
| | | class="action-text" |
|---|
| | | :style="{ width: (4 - data.lv) * 18 + 150 + 'px' }" |
|---|
| | | > |
|---|
| | | <el-checkbox v-model="data.leftCk" @change="allChange(data)">{{ |
|---|
| | | // data.text + (data.isApp ? "(app)" : "") |
|---|
| | | data.text |
|---|
| | | }}</el-checkbox> |
|---|
| | | </div> |
|---|
| | | <div class="action-item"> |
|---|
| | | <el-checkbox |
|---|
| | | v-for="(item, index) in data.actions" |
|---|
| | | :key="index" |
|---|
| | | v-model="item.checked" |
|---|
| | | @change="actionChange(data, item.checked)" |
|---|
| | | >{{ item.text }}</el-checkbox |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | </el-tree> |
|---|
| | | </el-scrollbar> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { defineComponent, ref, reactive, getCurrentInstance } from "vue"; |
|---|
| | | import http from "@/../src/api/http.js"; |
|---|
| | | export default defineComponent({ |
|---|
| | | setup() { |
|---|
| | | const selectId = ref(-1); |
|---|
| | | const checked = ref(false); |
|---|
| | | const tree = reactive([]); |
|---|
| | | const list = reactive([]); |
|---|
| | | const roles = reactive([]); |
|---|
| | | const roleList = reactive([]); |
|---|
| | | const roleTree = reactive([]); |
|---|
| | | const openKeys = reactive([]); |
|---|
| | | |
|---|
| | | const leftCheckChange = (node, selected) => { |
|---|
| | | node.actions.forEach((x, index) => { |
|---|
| | | x.checked = selected; |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | const nodeCheck = (node, data) => { |
|---|
| | | let rootData = roleList.find((x) => { |
|---|
| | | return x.id === node.pid; |
|---|
| | | }); |
|---|
| | | if (rootData && rootData.actions.length) { |
|---|
| | | rootData.actions[0].checked = |
|---|
| | | node.actions.some((x) => { |
|---|
| | | return x.checked; |
|---|
| | | }) || |
|---|
| | | data.halfCheckedNodes.some((x) => { |
|---|
| | | return x.id === node.pid; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const allChange = (data) => { |
|---|
| | | data.actions.forEach((item) => { |
|---|
| | | item.checked = data.leftCk; |
|---|
| | | }); |
|---|
| | | if (!data.children) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | setChildrenChecked(data, data.leftCk); |
|---|
| | | }; |
|---|
| | | const setChildrenChecked = (data, ck) => { |
|---|
| | | data.children.forEach((item) => { |
|---|
| | | item.leftCk = ck; |
|---|
| | | item.actions.forEach((c) => { |
|---|
| | | c.checked = ck; |
|---|
| | | }); |
|---|
| | | if (item.children) { |
|---|
| | | setChildrenChecked(item, ck); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | const actionChange = (data, ck) => { |
|---|
| | | ck = |
|---|
| | | data.actions.filter((x) => { |
|---|
| | | return x.checked; |
|---|
| | | }).length == data.actions.length; |
|---|
| | | data.leftCk = ck; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const load = () => { |
|---|
| | | const url = "api/Sys_Role/getUserChildRoles"; |
|---|
| | | http.post(url, {}, true).then((result) => { |
|---|
| | | |
|---|
| | | if (!result.status) return; |
|---|
| | | list.splice(0); |
|---|
| | | list.push(...result.data); |
|---|
| | | list.forEach((x) => { |
|---|
| | | if (x.parentId == 0) { |
|---|
| | | x.lv = 1; |
|---|
| | | x.children = []; |
|---|
| | | tree.push(x); |
|---|
| | | getTree(x.id, x); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | openKeys.push(tree[0].id); |
|---|
| | | selectId.value = openKeys[0]; |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | const getTree = (id, data) => { |
|---|
| | | list.forEach((x) => { |
|---|
| | | if (x.parentId == id) { |
|---|
| | | x.lv = data.lv + 1; |
|---|
| | | if (!data.children) data.children = []; |
|---|
| | | data.children.push(x); |
|---|
| | | getTree(x.id, x); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | const nodeClick = (node, selected) => { |
|---|
| | | selectId.value = node.id; |
|---|
| | | getUserRole(node); |
|---|
| | | }; |
|---|
| | | const getUserRole = (item) => { |
|---|
| | | selectId.value = item.id; |
|---|
| | | roleList.forEach((x) => { |
|---|
| | | x.actions.forEach((a) => { |
|---|
| | | a.checked = false; |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | let url = `/api/Sys_Role/getUserTreePermissionPDA?roleId=${item.id}`; |
|---|
| | | http.post(url, {}, true).then((result) => { |
|---|
| | | if (!result.status) return; |
|---|
| | | result.data.forEach((item) => { |
|---|
| | | if (item.actions.length == 0) return; |
|---|
| | | let sourceItem = roleList.find((f) => f.id == item.id); |
|---|
| | | if (!sourceItem) return; |
|---|
| | | item.actions.forEach((actions) => { |
|---|
| | | sourceItem.actions.forEach((soure) => { |
|---|
| | | if (soure.value == actions.value) { |
|---|
| | | soure.checked = true; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getRoleTree = (id, data, isRootId) => { |
|---|
| | | roleList.forEach((x) => { |
|---|
| | | if (x.pid == id) { |
|---|
| | | x.lv = data.lv + 1; |
|---|
| | | if (isRootId) { |
|---|
| | | x.rootId = id; |
|---|
| | | } |
|---|
| | | if (!data.children) data.children = []; |
|---|
| | | data.children.push(x); |
|---|
| | | getRoleTree(x.id, x, isRootId); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getCurrentTreePermission = () => { |
|---|
| | | let url = "/api/Sys_Role/getCurrentTreePermissionPDA"; |
|---|
| | | http.post(url, {}, true).then((result) => { |
|---|
| | | if (!result.status) return; |
|---|
| | | roleList.splice(0); |
|---|
| | | roles.splice(0); |
|---|
| | | roleList.push(...result.data.tree); |
|---|
| | | roles.push(...result.data.roles); |
|---|
| | | roleList.forEach((x) => { |
|---|
| | | if (x.pid == 0) { |
|---|
| | | x.lv = 1; |
|---|
| | | x.children = []; |
|---|
| | | roleTree.push(x); |
|---|
| | | getRoleTree(x.id, x); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | let $message = |
|---|
| | | getCurrentInstance().appContext.config.globalProperties.$message; |
|---|
| | | const save = () => { |
|---|
| | | if (selectId.value <= 0) { |
|---|
| | | return $message.error("请éæ©è§è²!"); |
|---|
| | | } |
|---|
| | | // var keys = this.$refs.eltreerole.getCheckedKeys().concat(this.$refs.eltreerole.getHalfCheckedKeys()); |
|---|
| | | // console.log(keys) |
|---|
| | | let userPermissions = []; |
|---|
| | | // keys.forEach((x) => { |
|---|
| | | // userPermissions.push({ |
|---|
| | | // id: x, |
|---|
| | | // actions: null, |
|---|
| | | // text: "PDA", |
|---|
| | | // }); |
|---|
| | | // }); |
|---|
| | | roleList.forEach((x) => { |
|---|
| | | let checkedPermission = x.actions.filter((f) => { |
|---|
| | | return f.checked; |
|---|
| | | }); |
|---|
| | | if (checkedPermission.length > 0) { |
|---|
| | | let actions = checkedPermission.map((m) => { |
|---|
| | | return { text: m.text, value: m.value }; |
|---|
| | | }); |
|---|
| | | userPermissions.push({ |
|---|
| | | id: x.id, |
|---|
| | | actions: actions, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | let url = `api/Sys_Role/SavePermissionPDA?roleId=${selectId.value}`; |
|---|
| | | http.post(url, userPermissions, true).then((result) => { |
|---|
| | | $message[result.status ? "success" : "error"](result.message); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | load(); |
|---|
| | | getCurrentTreePermission(); |
|---|
| | | return { |
|---|
| | | list, |
|---|
| | | nodeClick, |
|---|
| | | checked, |
|---|
| | | tree, |
|---|
| | | selectId, |
|---|
| | | openKeys, |
|---|
| | | getUserRole, |
|---|
| | | roles, |
|---|
| | | roleList, |
|---|
| | | getCurrentTreePermission, |
|---|
| | | leftCheckChange, |
|---|
| | | nodeCheck, |
|---|
| | | roleTree, |
|---|
| | | allChange, |
|---|
| | | actionChange, |
|---|
| | | save, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | </script> |
|---|
| | | <style lang="less" scoped> |
|---|
| | | .role-container { |
|---|
| | | position: absolute; |
|---|
| | | background: #f6f6f6; |
|---|
| | | height: 100%; |
|---|
| | | width: 100%; |
|---|
| | | padding: 10px; |
|---|
| | | display: flex; |
|---|
| | | .flex-col { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | } |
|---|
| | | .role-tree-left { |
|---|
| | | border: 1px solid #f2f2f2; |
|---|
| | | background: #fff; |
|---|
| | | width: 230px; |
|---|
| | | margin-right: 10px; |
|---|
| | | .title { |
|---|
| | | i { |
|---|
| | | margin-left: 10px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .role-tree-right { |
|---|
| | | background: #fff; |
|---|
| | | border: 1px solid #f2f2f2; |
|---|
| | | width: 0; |
|---|
| | | flex: 1; |
|---|
| | | .title { |
|---|
| | | display: flex; |
|---|
| | | i { |
|---|
| | | margin-left: 10px; |
|---|
| | | } |
|---|
| | | div { |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .action-group { |
|---|
| | | display: flex; |
|---|
| | | // line-height: 32px; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | label { |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | .action-text { |
|---|
| | | line-height: 33px; |
|---|
| | | label { |
|---|
| | | margin-right: 5px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .title { |
|---|
| | | padding: 10px; |
|---|
| | | background: rgb(246 250 255); |
|---|
| | | font-weight: bold; |
|---|
| | | font-size: 14px; |
|---|
| | | letter-spacing: 2px; |
|---|
| | | } |
|---|
| | | .el-role-list { |
|---|
| | | flex: 1; |
|---|
| | | height: 0; |
|---|
| | | overflow-x: hidden; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .role-tree-left ::v-deep(.el-tree-node__content) { |
|---|
| | | cursor: pointer; |
|---|
| | | height: auto; |
|---|
| | | padding: 5px; |
|---|
| | | margin: 2px 10px; |
|---|
| | | font-size: 15px; |
|---|
| | | } |
|---|
| | | .role-tree-left ::v-deep(.el-tree-node__content:hover) { |
|---|
| | | background: #f4f4f4; |
|---|
| | | border-radius: 20px; |
|---|
| | | } |
|---|
| | | .role-tree-left ::v-deep(.is-current > .el-tree-node__content:first-child) { |
|---|
| | | background: #f2f2f2; |
|---|
| | | border-radius: 20px; |
|---|
| | | } |
|---|
| | | .role-tree-right ::v-deep(.el-tree-node__content) { |
|---|
| | | margin-bottom: 5px; |
|---|
| | | height: auto; |
|---|
| | | } |
|---|
| | | .role-tree-right ::v-deep(.el-checkbox__label) { |
|---|
| | | position: relative; |
|---|
| | | top: 2px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | using System.Linq; |
|---|
| | | using System.Text; |
|---|
| | | using System.Threading.Tasks; |
|---|
| | | using WIDESEA_Core; |
|---|
| | | using WIDESEA_Core.BaseRepository; |
|---|
| | | using WIDESEA_Model.Models; |
|---|
| | | |
|---|
| | |
|---|
| | | { |
|---|
| | | public interface IInboundOrderRepository : IRepository<Dt_InboundOrder> |
|---|
| | | { |
|---|
| | | WebResponseContent GetInboundOrders(SaveModel saveModel); |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | using System.Linq; |
|---|
| | | using System.Text; |
|---|
| | | using System.Threading.Tasks; |
|---|
| | | using WIDESEA_Core; |
|---|
| | | using WIDESEA_Core.BaseServices; |
|---|
| | | using WIDESEA_IInboundRepository; |
|---|
| | | using WIDESEA_Model.Models; |
|---|
| | |
|---|
| | | { |
|---|
| | | IInboundOrderDetailRepository Repository { get; } |
|---|
| | | |
|---|
| | | WebResponseContent GetInboundOrderDetails(SaveModel saveModel); |
|---|
| | | List<Dt_InboundOrderDetail> UpdateReceiptQuantity(List<Dt_InboundOrderDetail> inboundOrderDetails, decimal receiptQuantity); |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | WebResponseContent CancelIn(HouseCancelIn houseCancelIn); |
|---|
| | | |
|---|
| | | Dt_InboundOrder GetInboundOrder(string InboundOrderNo); |
|---|
| | | WebResponseContent GetInboundOrders(SaveModel saveModel); |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | object GetMenu(List<int> menuIds); |
|---|
| | | |
|---|
| | | object GetTreeItem(int menuId); |
|---|
| | | List<MenuDTO> GetAllMenuPDA(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | WebResponseContent Save(Sys_Menu menu); |
|---|
| | | |
|---|
| | | WebResponseContent DelMenu(int menuId); |
|---|
| | | List<MenuDTO> GetUserMenuListPDA(int roleId); |
|---|
| | | object? GetTreeMenuPDAStash(int parentId); |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | List<RoleNodes> GetAllChildren(int roleId); |
|---|
| | | |
|---|
| | | WebResponseContent GetCurrentTreePermission(); |
|---|
| | | |
|---|
| | | WebResponseContent GetCurrentTreePermissionPDA(); |
|---|
| | | WebResponseContent GetUserTreePermission(int role_Id); |
|---|
| | | |
|---|
| | | WebResponseContent GetUserTreePermissionPDA(int roleId); |
|---|
| | | WebResponseContent SavePermission(List<UserPermissionDTO> userPermissions, int roleId); |
|---|
| | | WebResponseContent SavePermissionPDA(List<UserPermissionDTO> userPermissions, int roleId); |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | using System.Linq; |
|---|
| | | using System.Text; |
|---|
| | | using System.Threading.Tasks; |
|---|
| | | using WIDESEA_Core; |
|---|
| | | using WIDESEA_Core.BaseRepository; |
|---|
| | | using WIDESEA_Core.Enums; |
|---|
| | | using WIDESEA_Core.Helper; |
|---|
| | | using WIDESEA_IInboundRepository; |
|---|
| | | using WIDESEA_Model.Models; |
|---|
| | | |
|---|
| | |
|---|
| | | { |
|---|
| | | _unitOfWorkManage = unitOfWorkManage; |
|---|
| | | } |
|---|
| | | |
|---|
| | | public WebResponseContent GetInboundOrders(SaveModel saveModel) |
|---|
| | | { |
|---|
| | | WebResponseContent content = new WebResponseContent(); |
|---|
| | | try |
|---|
| | | { |
|---|
| | | int pageNo = saveModel.MainData["pageNo"].ObjToInt(); |
|---|
| | | string? orderNo = saveModel.MainData["orderNo"].ToString(); |
|---|
| | | int warehouseId = saveModel.MainData["warehouseId"].ObjToInt(); |
|---|
| | | List<Dt_InboundOrder> dt_ReceiveOrders = new List<Dt_InboundOrder>(); |
|---|
| | | if (string.IsNullOrEmpty(orderNo)) |
|---|
| | | { |
|---|
| | | dt_ReceiveOrders = Db.Queryable<Dt_InboundOrder>().Where(x => x.OrderStatus < InboundStatusEnum.å
¥åºå®æ.ObjToInt() && x.WarehouseId == warehouseId).Includes(x => x.Details).OrderByDescending(x => x.CreateDate).ToPageList(pageNo, 10); |
|---|
| | | } |
|---|
| | | else |
|---|
| | | { |
|---|
| | | dt_ReceiveOrders = Db.Queryable<Dt_InboundOrder>().Where(x => (x.OrderNo.Contains(orderNo)) && x.OrderStatus < InboundStatusEnum.å
¥åºå®æ.ObjToInt() && x.WarehouseId == warehouseId).Includes(x => x.Details).OrderByDescending(x => x.CreateDate).ToPageList(pageNo, 10); |
|---|
| | | } |
|---|
| | | |
|---|
| | | content.OK(data: dt_ReceiveOrders); |
|---|
| | | } |
|---|
| | | catch (Exception ex) |
|---|
| | | { |
|---|
| | | content.Error(ex.Message); |
|---|
| | | } |
|---|
| | | return content; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | return content; |
|---|
| | | } |
|---|
| | | |
|---|
| | | public WebResponseContent GetInboundOrders(SaveModel saveModel) |
|---|
| | | { |
|---|
| | | WebResponseContent content = new WebResponseContent(); |
|---|
| | | try |
|---|
| | | { |
|---|
| | | int pageNo = saveModel.MainData["pageNo"].ObjToInt(); |
|---|
| | | string? orderNo = saveModel.MainData["orderNo"].ToString(); |
|---|
| | | int warehouseId = saveModel.MainData["warehouseId"].ObjToInt(); |
|---|
| | | List<Dt_InboundOrder> dt_ReceiveOrders = new List<Dt_InboundOrder>(); |
|---|
| | | if (string.IsNullOrEmpty(orderNo)) |
|---|
| | | { |
|---|
| | | dt_ReceiveOrders = Db.Queryable<Dt_InboundOrder>().Where(x => x.OrderStatus < InboundStatusEnum.å
¥åºå®æ.ObjToInt() && x.WarehouseId == warehouseId).Includes(x => x.Details).OrderByDescending(x => x.CreateDate).ToPageList(pageNo, 10); |
|---|
| | | } |
|---|
| | | else |
|---|
| | | { |
|---|
| | | dt_ReceiveOrders = Db.Queryable<Dt_InboundOrder>().Where(x => (x.OrderNo.Contains(orderNo)) && x.OrderStatus < InboundStatusEnum.å
¥åºå®æ.ObjToInt() && x.WarehouseId == warehouseId).Includes(x => x.Details).OrderByDescending(x => x.CreateDate).ToPageList(pageNo, 10); |
|---|
| | | } |
|---|
| | | |
|---|
| | | content.OK(data: dt_ReceiveOrders); |
|---|
| | | } |
|---|
| | | catch (Exception ex) |
|---|
| | | { |
|---|
| | | content.Error(ex.Message); |
|---|
| | | } |
|---|
| | | return content; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /// <summary> |
|---|
| | | /// éªè¯åæ®æ·»å DTO对象 |
|---|
| | | /// </summary> |
|---|
| | |
|---|
| | | using System.Linq; |
|---|
| | | using System.Text; |
|---|
| | | using System.Threading.Tasks; |
|---|
| | | using WIDESEA_Core; |
|---|
| | | using WIDESEA_Core.BaseServices; |
|---|
| | | using WIDESEA_Core.Enums; |
|---|
| | | using WIDESEA_Core.Helper; |
|---|
| | |
|---|
| | | { |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | public WebResponseContent GetInboundOrderDetails(SaveModel saveModel) |
|---|
| | | { |
|---|
| | | WebResponseContent content = new WebResponseContent(); |
|---|
| | | try |
|---|
| | | { |
|---|
| | | string orderNo = saveModel.MainData["orderNo"].ToString(); |
|---|
| | | Dt_InboundOrder inboundOrder = Db.Queryable<Dt_InboundOrder>().Where(x => x.OrderNo == orderNo).Includes(x => x.Details).First(); |
|---|
| | | content.OK(data: inboundOrder.Details); |
|---|
| | | } |
|---|
| | | catch (Exception ex) |
|---|
| | | { |
|---|
| | | content.Error(ex.Message); |
|---|
| | | } |
|---|
| | | return content; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | }).FirstOrDefault(); |
|---|
| | | return sysMenu; |
|---|
| | | } |
|---|
| | | |
|---|
| | | public List<MenuDTO> GetAllMenuPDA() |
|---|
| | | { |
|---|
| | | if (App.User.IsRoleIdSuperAdmin(App.User.RoleId)) |
|---|
| | | { |
|---|
| | | return GetAllPDAMenu(); |
|---|
| | | } |
|---|
| | | List<int> menuIds = GetPermissions(App.User.RoleId).Select(x => x.MenuId).ToList(); |
|---|
| | | return GetAllPDAMenu().Where(x => menuIds.Contains(x.MenuId)).ToList(); |
|---|
| | | } |
|---|
| | | public List<MenuDTO> GetAllPDAMenu() |
|---|
| | | { |
|---|
| | | List<Sys_Menu> menus = base.QueryData(x => (x.Enable == 1 || x.Enable == 2) && x.MenuType == 1).OrderByDescending(a => a.OrderNo).ThenByDescending(q => q.ParentId).ToList(); |
|---|
| | | List<MenuDTO> _menus = _mapper.Map<List<MenuDTO>>(menus); |
|---|
| | | _menus.ForEach(x => |
|---|
| | | { |
|---|
| | | if (!string.IsNullOrEmpty(x.Auth) && x.Auth.Length > 10) |
|---|
| | | { |
|---|
| | | try |
|---|
| | | { |
|---|
| | | x.Actions = x.Auth.DeserializeObject<List<ActionDTO>>(); |
|---|
| | | } |
|---|
| | | catch { } |
|---|
| | | } |
|---|
| | | x.Actions ??= new List<ActionDTO>(); |
|---|
| | | }); |
|---|
| | | string test = _menus.Serialize(); |
|---|
| | | return _menus; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | |
|---|
| | | return webResponse = WebResponseContent.Instance.OK("å é¤æå"); |
|---|
| | | } |
|---|
| | | |
|---|
| | | public List<MenuDTO> GetUserMenuListPDA(int roleId) |
|---|
| | | { |
|---|
| | | if (App.User.IsRoleIdSuperAdmin(roleId)) |
|---|
| | | { |
|---|
| | | return BaseDal.GetAllMenuPDA(); |
|---|
| | | } |
|---|
| | | List<int> menuIds = BaseDal.GetPermissions(roleId).Select(x => x.MenuId).ToList(); |
|---|
| | | return BaseDal.GetAllMenuPDA().Where(x => menuIds.Contains(x.MenuId)).ToList(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | public object? GetTreeMenuPDAStash(int parentId) |
|---|
| | | { |
|---|
| | | List<MenuDTO> _menus = BaseDal.GetAllMenuPDA().Where(x => x.ParentId == parentId).ToList(); |
|---|
| | | return _menus; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | |
|---|
| | | return content; |
|---|
| | | } |
|---|
| | | public WebResponseContent GetCurrentTreePermissionPDA() |
|---|
| | | { |
|---|
| | | WebResponseContent content = GetCurrentUserTreePermissionPDA(); |
|---|
| | | int roleId = App.User.RoleId; |
|---|
| | | return WebResponseContent.Instance.OK(null, new |
|---|
| | | { |
|---|
| | | tree = content.Data, |
|---|
| | | roles = GetAllChildren(roleId) |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | public WebResponseContent GetCurrentUserTreePermissionPDA() |
|---|
| | | { |
|---|
| | | return GetUserTreePermissionPDA(App.User.RoleId); |
|---|
| | | } |
|---|
| | | public WebResponseContent GetUserTreePermissionPDA(int roleId) |
|---|
| | | { |
|---|
| | | if (!App.User.IsRoleIdSuperAdmin(roleId) && App.User.RoleId != roleId) |
|---|
| | | { |
|---|
| | | if (!(GetAllChildren(App.User.RoleId)).Exists(x => x.Id == roleId)) |
|---|
| | | { |
|---|
| | | return WebResponseContent.Instance.Error("没ææéè·åæ¤è§è²çæéä¿¡æ¯"); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | //è·åç¨æ·æé |
|---|
| | | List<Permissions> permissions = _MenuRepository.GetPermissions(roleId); |
|---|
| | | //æéç¨æ·æéæ¥è¯¢ææçèåä¿¡æ¯ |
|---|
| | | List<MenuDTO> menus = _MenuService.GetUserMenuListPDA(roleId); |
|---|
| | | |
|---|
| | | //è·åå½åç¨æ·æéå¦:(Add,Search)对åºçæ¾ç¤ºææ¬ä¿¡æ¯å¦:Addï¼æ·»å ï¼Search:æ¥è¯¢ |
|---|
| | | var data = menus.Where(x => x.MenuType == 1).Select(x => new |
|---|
| | | { |
|---|
| | | Id = x.MenuId, |
|---|
| | | Pid = x.ParentId, |
|---|
| | | Text = x.MenuName, |
|---|
| | | IsApp = x.MenuType == 1, |
|---|
| | | Actions = _MenuService.GetActions(x.MenuId, x.Actions, permissions, roleId) |
|---|
| | | }); |
|---|
| | | return WebResponseContent.Instance.OK(null, data); |
|---|
| | | } |
|---|
| | | /// <summary> |
|---|
| | | /// ä¿åè§è²æé |
|---|
| | | /// </summary> |
|---|
| | | /// <param name="userPermissions"></param> |
|---|
| | | /// <param name="roleId"></param> |
|---|
| | | /// <returns></returns> |
|---|
| | | public WebResponseContent SavePermissionPDA(List<UserPermissionDTO> userPermissions, int roleId) |
|---|
| | | { |
|---|
| | | WebResponseContent content = new WebResponseContent(); |
|---|
| | | string message = ""; |
|---|
| | | try |
|---|
| | | { |
|---|
| | | if (!GetAllChildren(App.User.RoleId).Exists(x => x.Id == roleId)) |
|---|
| | | return WebResponseContent.Instance.Error("没ææéä¿®æ¹æ¤è§è²çæéä¿¡æ¯"); |
|---|
| | | //å½åç¨æ·çæé |
|---|
| | | List<Permissions> permissions = _MenuRepository.GetPermissions(App.User.RoleId); |
|---|
| | | |
|---|
| | | List<int> originalMeunIds = new List<int>(); |
|---|
| | | |
|---|
| | | List<int> menuIds = _MenuRepository.QueryData(x => x.MenuId, x => x.MenuType == 1); |
|---|
| | | |
|---|
| | | //被åé
è§è²çæé |
|---|
| | | List<Sys_RoleAuth> roleAuths = _RoleAuthRepository.QueryData(x => x.RoleId == roleId && menuIds.Contains(x.MenuId)); |
|---|
| | | List<Sys_RoleAuth> updateAuths = new List<Sys_RoleAuth>(); |
|---|
| | | foreach (UserPermissionDTO x in userPermissions) |
|---|
| | | { |
|---|
| | | Permissions per = permissions.FirstOrDefault(p => p.MenuId == x.Id); |
|---|
| | | //ä¸è½åé
è¶
è¿å½åç¨æ·çæé |
|---|
| | | if (per == null) continue; |
|---|
| | | //per.UserAuthArr.Contains(a.Value)æ ¡éªæéèå´ |
|---|
| | | string[] arr = x.Actions == null || x.Actions.Count == 0 |
|---|
| | | ? new string[0] |
|---|
| | | : x.Actions.Where(a => per.UserAuthArr.Contains(a.Value)) |
|---|
| | | .Select(s => s.Value).ToArray(); |
|---|
| | | |
|---|
| | | //å¦æå½åæé没æåé
è¿ï¼è®¾ç½®Auth_Idé»è®¤ä¸º0ï¼è¡¨ç¤ºæ°å¢çæé |
|---|
| | | var auth = roleAuths.Where(r => r.MenuId == x.Id).Select(s => new { s.AuthId, s.AuthValue, s.MenuId }).FirstOrDefault(); |
|---|
| | | string newAuthValue = string.Join(",", arr); |
|---|
| | | //æé没æåçåååä¸å¤ç |
|---|
| | | if (auth == null || auth.AuthValue != newAuthValue) |
|---|
| | | { |
|---|
| | | updateAuths.Add(new Sys_RoleAuth() |
|---|
| | | { |
|---|
| | | RoleId = roleId, |
|---|
| | | MenuId = x.Id, |
|---|
| | | AuthValue = string.Join(",", arr), |
|---|
| | | AuthId = auth == null ? 0 : auth.AuthId, |
|---|
| | | ModifyDate = DateTime.Now, |
|---|
| | | Modifier = App.User.UserName, |
|---|
| | | CreateDate = DateTime.Now, |
|---|
| | | Creater = App.User.UserName |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | else |
|---|
| | | { |
|---|
| | | originalMeunIds.Add(auth.MenuId); |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | //æ´æ°æé |
|---|
| | | _RoleAuthRepository.UpdateData(updateAuths); |
|---|
| | | //æ°å¢çæé |
|---|
| | | _RoleAuthRepository.AddData(updateAuths); |
|---|
| | | |
|---|
| | | //è·åæéåæ¶çæé |
|---|
| | | int[] authIds = roleAuths.Where(x => userPermissions.Select(u => u.Id) |
|---|
| | | .ToList().Contains(x.MenuId) || originalMeunIds.Contains(x.MenuId)) |
|---|
| | | .Select(s => s.AuthId) |
|---|
| | | .ToArray(); |
|---|
| | | List<Sys_RoleAuth> delAuths = roleAuths.Where(x => x.AuthValue != "" && !authIds.Contains(x.AuthId)).ToList(); |
|---|
| | | delAuths.ForEach(x => |
|---|
| | | { |
|---|
| | | x.AuthValue = ""; |
|---|
| | | }); |
|---|
| | | //å°åæ¶çæé设置为"" |
|---|
| | | _RoleAuthRepository.DeleteData(delAuths); |
|---|
| | | |
|---|
| | | int addCount = updateAuths.Where(x => x.AuthId <= 0).Count(); |
|---|
| | | int updateCount = updateAuths.Where(x => x.AuthId > 0).Count(); |
|---|
| | | |
|---|
| | | string _version = DateTime.Now.ToString("yyyyMMddHHMMssfff"); |
|---|
| | | |
|---|
| | | |
|---|
| | | content.OK($"ä¿åæåï¼æ°å¢å é
èåæé{addCount}æ¡,æ´æ°èå{updateCount}æ¡,å é¤æé{delAuths.Count}æ¡"); |
|---|
| | | } |
|---|
| | | catch (Exception ex) |
|---|
| | | { |
|---|
| | | message = "å¼å¸¸ä¿¡æ¯ï¼" + ex.Message + ex.StackTrace + ","; |
|---|
| | | } |
|---|
| | | |
|---|
| | | return content; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | public InboundOrderController(IInboundOrderService service) : base(service) |
|---|
| | | { |
|---|
| | | } |
|---|
| | | |
|---|
| | | /// <summary> |
|---|
| | | /// æ¥è¯¢å
¥åºåä¿¡æ¯ |
|---|
| | | /// </summary> |
|---|
| | | /// <returns></returns> |
|---|
| | | [HttpPost, HttpGet, Route("GetInboundOrders")] |
|---|
| | | public WebResponseContent GetInboundOrders([FromBody] SaveModel saveModel) |
|---|
| | | { |
|---|
| | | return Service.GetInboundOrders(saveModel); |
|---|
| | | } |
|---|
| | | /// <summary> |
|---|
| | | /// WMSä¸åå
¥åºåæ® |
|---|
| | | /// </summary> |
|---|
| | |
|---|
| | | using Microsoft.AspNetCore.Http; |
|---|
| | | using Microsoft.AspNetCore.Mvc; |
|---|
| | | using WIDESEA_Core; |
|---|
| | | using WIDESEA_Core.BaseController; |
|---|
| | | using WIDESEA_IInboundService; |
|---|
| | | using WIDESEA_Model.Models; |
|---|
| | |
|---|
| | | public InboundOrderDetailController(IInboundOrderDetailService service) : base(service) |
|---|
| | | { |
|---|
| | | } |
|---|
| | | /// <summary> |
|---|
| | | /// æ¥è¯¢å
¥åºå详æ
|
|---|
| | | /// </summary> |
|---|
| | | /// <returns></returns> |
|---|
| | | [HttpPost, HttpGet, Route("GetInboundOrderDetails")] |
|---|
| | | public WebResponseContent GetInboundOrderDetails([FromBody] SaveModel saveModel) |
|---|
| | | { |
|---|
| | | return Service.GetInboundOrderDetails(saveModel); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | using Microsoft.AspNetCore.Mvc; |
|---|
| | | using WIDESEA_Core; |
|---|
| | | using WIDESEA_Core.BaseController; |
|---|
| | | using WIDESEA_Core.Helper; |
|---|
| | | using WIDESEA_DTO.Inbound; |
|---|
| | | using WIDESEA_IInboundService; |
|---|
| | | using WIDESEA_IOutboundService; |
|---|
| | |
|---|
| | | { |
|---|
| | | return _inboundService.InbounOrderService.QueryOrderInfo(pageNo, orderNo); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /// <summary> |
|---|
| | | /// ä¸è½½PDA |
|---|
| | | /// </summary> |
|---|
| | | /// <returns></returns> |
|---|
| | | [HttpPost, HttpGet, Route("DownLoadApp"), AllowAnonymous] |
|---|
| | | public virtual ActionResult DownLoadApp() |
|---|
| | | { |
|---|
| | | string path = $"{AppDomain.CurrentDomain.BaseDirectory}Upload/App/"; |
|---|
| | | if (!Directory.Exists(path)) Directory.CreateDirectory(path); |
|---|
| | | path += "WMS-PDA.apk"; |
|---|
| | | |
|---|
| | | if (System.IO.File.Exists(path)) |
|---|
| | | { |
|---|
| | | byte[] fileBytes = System.IO.File.ReadAllBytes(path); |
|---|
| | | return File( |
|---|
| | | fileBytes, |
|---|
| | | System.Net.Mime.MediaTypeNames.Application.Octet, |
|---|
| | | System.IO.Path.GetFileName(path) |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | else |
|---|
| | | { |
|---|
| | | return Json(WebResponseContent.Instance.Error($"æªæ¾å°å®è£
å
")); |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | /// <summary> |
|---|
| | | /// ä¸ä¼ PDA |
|---|
| | | /// </summary> |
|---|
| | | /// <param name="fileInput"></param> |
|---|
| | | /// <returns></returns> |
|---|
| | | [HttpPost, HttpGet, Route("UploadApp"), AllowAnonymous] |
|---|
| | | [Consumes("multipart/form-data")] |
|---|
| | | public WebResponseContent UploadApp(IEnumerable<IFormFile> fileInput) |
|---|
| | | { |
|---|
| | | try |
|---|
| | | { |
|---|
| | | List<IFormFile> files = fileInput.ToList(); |
|---|
| | | if (files == null || files.Count() == 0) |
|---|
| | | return new WebResponseContent { Status = true, Message = "请éæ©ä¸ä¼ çæ件" }; |
|---|
| | | IFormFile formFile = files[0]; |
|---|
| | | string dicPath = $"{AppDomain.CurrentDomain.BaseDirectory}Upload/App/"; |
|---|
| | | if (!Directory.Exists(dicPath)) Directory.CreateDirectory(dicPath); |
|---|
| | | string path = $"{dicPath}WMS-PDA{DateTime.Now:yyyyMMddhhmmss}.apk"; |
|---|
| | | dicPath = $"{dicPath}WMS-PDA.apk"; |
|---|
| | | if (System.IO.File.Exists(dicPath)) |
|---|
| | | System.IO.File.Move(dicPath, path); |
|---|
| | | |
|---|
| | | using (var stream = new FileStream(dicPath, FileMode.Create)) |
|---|
| | | { |
|---|
| | | formFile.CopyTo(stream); |
|---|
| | | } |
|---|
| | | return new WebResponseContent { Status = true, Message = "æ件ä¸ä¼ æå" }; |
|---|
| | | } |
|---|
| | | catch (Exception ex) |
|---|
| | | { |
|---|
| | | return WebResponseContent.Instance.Error(ex.Message); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | [HttpPost, HttpGet, Route("GetPDAVersion"), AllowAnonymous] |
|---|
| | | public WebResponseContent GetPDAVersion(string version) |
|---|
| | | { |
|---|
| | | try |
|---|
| | | { |
|---|
| | | string versionP = AppSettings.app("PDAVersion"); |
|---|
| | | if (Convert.ToInt32(versionP) > Convert.ToInt32(version)) |
|---|
| | | return WebResponseContent.Instance.OK(data: true); |
|---|
| | | else return WebResponseContent.Instance.OK(data: false); |
|---|
| | | } |
|---|
| | | catch (Exception ex) |
|---|
| | | { |
|---|
| | | return WebResponseContent.Instance.Error(ex.Message); |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | using WIDESEA_Model.Models; |
|---|
| | | using WIDESEA_DTO.System; |
|---|
| | | |
|---|
| | | namespace WIDESEA_WMSServer.Controllers.System |
|---|
| | | namespace WIDESEA_WMSServer.Controllers |
|---|
| | | { |
|---|
| | | [Route("api/Sys_Dictionary")] |
|---|
| | | [ApiController] |
|---|
| | |
|---|
| | | using WIDESEA_ISystemService; |
|---|
| | | using WIDESEA_Model.Models; |
|---|
| | | |
|---|
| | | namespace WIDESEA_WMSServer.Controllers.System |
|---|
| | | namespace WIDESEA_WMSServer.Controllers |
|---|
| | | { |
|---|
| | | [Route("api/Sys_DictionaryList")] |
|---|
| | | [ApiController] |
|---|
| | |
|---|
| | | using WIDESEA_ISystemService; |
|---|
| | | using WIDESEA_Model.Models; |
|---|
| | | |
|---|
| | | namespace WIDESEA_WMSServer.Controllers.System |
|---|
| | | namespace WIDESEA_WMSServer.Controllers |
|---|
| | | { |
|---|
| | | [Route("api/Sys_Log")] |
|---|
| | | [ApiController] |
|---|
| | |
|---|
| | | { |
|---|
| | | return Service.DelMenu(menuId); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /// <summary> |
|---|
| | | /// è·åé¦é¡µææä»åºæé |
|---|
| | | /// </summary> |
|---|
| | | /// <returns></returns> |
|---|
| | | [HttpGet, HttpPost, Route("GetTreeMenuPDAStash")] |
|---|
| | | public IActionResult GetTreeMenuPDAStash(int ParentId) |
|---|
| | | { |
|---|
| | | return Json(Service.GetTreeMenuPDAStash(ParentId)); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | using WIDESEA_ISystemService; |
|---|
| | | using WIDESEA_Model.Models; |
|---|
| | | |
|---|
| | | namespace WIDESEA_WMSServer.Controllers.System |
|---|
| | | namespace WIDESEA_WMSServer.Controllers |
|---|
| | | { |
|---|
| | | [Route("api/Sys_RoleAuth")] |
|---|
| | | [ApiController] |
|---|
| | |
|---|
| | | using WIDESEA_Model.Models; |
|---|
| | | using WIDESEA_Model.Models.System; |
|---|
| | | |
|---|
| | | namespace WIDESEA_WMSServer.Controllers.System |
|---|
| | | namespace WIDESEA_WMSServer.Controllers |
|---|
| | | { |
|---|
| | | [Route("api/Sys_Role")] |
|---|
| | | [ApiController] |
|---|
| | |
|---|
| | | { |
|---|
| | | return Json(Service.SavePermission(userPermissions, roleId)); |
|---|
| | | } |
|---|
| | | |
|---|
| | | [HttpPost, Route("getCurrentTreePermissionPDA")] |
|---|
| | | public IActionResult GetCurrentTreePermissionPDA() |
|---|
| | | { |
|---|
| | | return Json(Service.GetCurrentTreePermissionPDA()); |
|---|
| | | } |
|---|
| | | [HttpPost, Route("getUserTreePermissionPDA")] |
|---|
| | | public IActionResult GetUserTreePermissionPDA(int roleId) |
|---|
| | | { |
|---|
| | | return Json(Service.GetUserTreePermissionPDA(roleId)); |
|---|
| | | } |
|---|
| | | |
|---|
| | | [HttpPost, Route("SavePermissionPDA")] |
|---|
| | | public IActionResult SavePermissionPDA([FromBody] List<UserPermissionDTO> userPermissions, int roleId) |
|---|
| | | { |
|---|
| | | return Json(Service.SavePermissionPDA(userPermissions, roleId)); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | "MainDB": "DB_WIDESEA", //å½å项ç®ç主åºï¼æ对åºçè¿æ¥å符串çEnabledå¿
须为true |
|---|
| | | //è¿æ¥å符串 |
|---|
| | | //"ConnectionString": "HTI6FB1H05Krd07mNm9yBCNhofW6edA5zLs9TY~MNthRYW3kn0qKbMIsGp~3yyPDF1YZUCPBQx8U0Jfk4PH~ajNFXVIwlH85M3F~v_qKYQ3CeAz3q1mLVDn8O5uWt1~3Ut2V3KRkEwYHvW2oMDN~QIDXPxDgXN0R2oTIhc9dNu7QNaLEknblqmHhjaNSSpERdDVZIgHnMKejU_SL49tralBkZmDNi0hmkbL~837j1NWe37u9fJKmv91QPb~16JsuI9uu0EvNZ06g6PuZfOSAeFH9GMMIZiketdcJG3tHelo=", |
|---|
| | | "ConnectionString": "Data Source=.;Initial Catalog=WIDESEAWMS_JAMK;User ID=sa;Password=sa123456;Integrated Security=False;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False", |
|---|
| | | "ConnectionString": "Data Source=.;Initial Catalog=WIDESEAWMS_JAMK;User ID=sa;Password=P@ssw0rd;Integrated Security=False;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False", |
|---|
| | | //è·¨å |
|---|
| | | "Cors": { |
|---|
| | | "PolicyName": "CorsIpAccess", //çç¥å称 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | unpackage |
|---|
| | | node_modules |
|---|
| | | uview-ui |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | // launch.json é
ç½®äºå¯å¨è°è¯æ¶ç¸å
³è®¾ç½®ï¼configurationsä¸èç¹å称å¯ä¸º app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/ |
|---|
| | | // launchtype项å¯é
ç½®å¼ä¸ºlocalæremote, local代表å端è¿æ¬å°äºå½æ°ï¼remote代表å端è¿äºç«¯äºå½æ° |
|---|
| | | "version" : "0.0", |
|---|
| | | "configurations" : [ |
|---|
| | | { |
|---|
| | | "app-plus" : { |
|---|
| | | "launchtype" : "local" |
|---|
| | | }, |
|---|
| | | "default" : { |
|---|
| | | "launchtype" : "local" |
|---|
| | | }, |
|---|
| | | "type" : "uniCloud" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "playground" : "standard", |
|---|
| | | "type" : "uni-app:app-android" |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | // ä½¿ç¨ IntelliSense äºè§£ç¸å
³å±æ§ã |
|---|
| | | // æ¬å以æ¥çç°æå±æ§çæè¿°ã |
|---|
| | | // 欲äºè§£æ´å¤ä¿¡æ¯ï¼è¯·è®¿é®: https://go.microsoft.com/fwlink/?linkid=830387 |
|---|
| | | "version": "0.2.0", |
|---|
| | | "configurations": [ |
|---|
| | | { |
|---|
| | | "type": "chrome", |
|---|
| | | "request": "launch", |
|---|
| | | "name": "é对 localhost å¯å¨ Chrome", |
|---|
| | | "url": "http://localhost:8080", |
|---|
| | | "webRoot": "${workspaceFolder}" |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | onLaunch: function() { |
|---|
| | | // console.log('App Launch') |
|---|
| | | }, |
|---|
| | | onShow: function() { |
|---|
| | | // this.interval = setInterval(function() { |
|---|
| | | // uni.hideKeyboard(); //éè软é®ç |
|---|
| | | // }, 50); |
|---|
| | | // console.log('App Show') |
|---|
| | | }, |
|---|
| | | onHide: function() { |
|---|
| | | // console.log('App Hide') |
|---|
| | | }, |
|---|
| | | onLoad() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import "./static/iconfont.css"; |
|---|
| | | @import './tuniao-ui/index.scss'; |
|---|
| | | @import './tuniao-ui/iconfont.css'; |
|---|
| | | @import "uview-ui/index.scss"; |
|---|
| | | /*æ¯ä¸ªé¡µé¢å
Œ
±css */ |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | MIT License |
|---|
| | | |
|---|
| | | Copyright (c) 2020 www.uviewui.com |
|---|
| | | |
|---|
| | | Permission is hereby granted, free of charge, to any person obtaining a copy |
|---|
| | | of this software and associated documentation files (the "Software"), to deal |
|---|
| | | in the Software without restriction, including without limitation the rights |
|---|
| | | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|---|
| | | copies of the Software, and to permit persons to whom the Software is |
|---|
| | | furnished to do so, subject to the following conditions: |
|---|
| | | |
|---|
| | | The above copyright notice and this permission notice shall be included in all |
|---|
| | | copies or substantial portions of the Software. |
|---|
| | | |
|---|
| | | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|---|
| | | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|---|
| | | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|---|
| | | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|---|
| | | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|---|
| | | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
|---|
| | | SOFTWARE. |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | let config = { |
|---|
| | | baseUrl: 'http://127.0.0.1:9290', |
|---|
| | | urls: [ |
|---|
| | | 'http://10.30.4.92:9283', |
|---|
| | | 'http://10.30.4.92:9283' |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | export { |
|---|
| | | config |
|---|
| | | } |
|---|
| | | export const ProOutStatus = [ |
|---|
| | | { label: 'åºè´§æªå¼å§', value: 0 }, |
|---|
| | | { label: 'åºè´§ä¸å¾
å®æ', value: 1 }, |
|---|
| | | { label: 'åºè´§å®æ', value: 2 } |
|---|
| | | ] |
|---|
| | | export const ReceiveOrderStatus = [ |
|---|
| | | { label: 'æªå¼å§', value: 0 }, |
|---|
| | | { label: 'æ¶è´§ä¸', value: 1 } |
|---|
| | | ] |
|---|
| | | export const InboundOrderStatus = [ |
|---|
| | | { label: 'æªå¼å§', value: 0 }, |
|---|
| | | { label: 'å
¥åºä¸', value: 1 } |
|---|
| | | ] |
|---|
| | | export const TakeStockStatus = [ |
|---|
| | | { label: 'æªçç¹', value: 0 }, |
|---|
| | | { label: 'çç¹ä¸', value: 1 }, |
|---|
| | | { label: 'çç¹å®æ', value: 2 } |
|---|
| | | ] |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import { config } from "./config"; |
|---|
| | | |
|---|
| | | // let baseUrl = 'http://10.1.105.155:9995' |
|---|
| | | // let baseUrl = 'http://10.1.211.101:9004' |
|---|
| | | let baseUrl = ''; |
|---|
| | | // let baseUrl = 'http://192.168.43.71:9995' |
|---|
| | | // let baseUrl = 'http://47.112.196.253:8881' |
|---|
| | | |
|---|
| | | const install = (Vue, vm) => { |
|---|
| | | baseUrl = config.baseUrl; |
|---|
| | | // æ¤ä¸ºèªå®ä¹é
ç½®åæ°ï¼å
·ä½åæ°è§ä¸æ¹è¯´æ |
|---|
| | | Vue.prototype.$u.http.setConfig({ |
|---|
| | | baseUrl: baseUrl, |
|---|
| | | loadingText: 'åªåå è½½ä¸~', |
|---|
| | | loadingTime: 5000, |
|---|
| | | originalData: true, |
|---|
| | | // ...... |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 请æ±æ¦æªï¼é
ç½®Tokençåæ° |
|---|
| | | Vue.prototype.$u.http.interceptor.request = (config) => { |
|---|
| | | // å¼ç¨token |
|---|
| | | // æ¹å¼ä¸ï¼åæ¾å¨vuexçtokenï¼å设使ç¨äºuViewå°è£
çvuexæ¹å¼ |
|---|
| | | // è§ï¼https://uviewui.com/components/globalVariable.html |
|---|
| | | // config.header.token = vm.token; |
|---|
| | | |
|---|
| | | // æ¹å¼äºï¼å¦æ没æ使ç¨uViewå°è£
çvuexæ¹æ³ï¼é£ä¹éè¦ä½¿ç¨$store.stateè·å |
|---|
| | | // config.header.token = vm.$store.state.token; |
|---|
| | | |
|---|
| | | // æ¹å¼ä¸ï¼å¦ætokenæ¾å¨äºglobalDataï¼éè¿getApp().globalDataè·å |
|---|
| | | // config.header.token = getApp().globalData.username; |
|---|
| | | |
|---|
| | | // æ¹å¼åï¼å¦ætokenæ¾å¨äºStorageæ¬å°åå¨ä¸ï¼æ¦æªæ¯æ¯æ¬¡è¯·æ±é½æ§è¡ç |
|---|
| | | // æ以åªææ¨éæ°ç»å½ä¿®æ¹äºStorageï¼ä¸ä¸æ¬¡ç请æ±å°ä¼æ¯ææ°å¼ |
|---|
| | | // const token = uni.getStorageSync('token'); |
|---|
| | | // config.header.token = token; |
|---|
| | | // debugger |
|---|
| | | // var aaa = "Bearer " + uni.getStorageSync('jo_id_token'); |
|---|
| | | // var bbb = "a" + uni.getStorageSync('remAcc'); |
|---|
| | | // var ccc = "a" + uni.getStorageSync('remPwd'); |
|---|
| | | // var ddd = "a" + uni.getStorageSync('acc'); |
|---|
| | | // var eee = "a" + uni.getStorageSync('pwd'); |
|---|
| | | config.header.Token = 'xxxxxx'; |
|---|
| | | config.header.Authorization = "Bearer " + uni.getStorageSync('jo_id_token'); |
|---|
| | | config.header.uniapp = '1'; |
|---|
| | | // å¯ä»¥å¯¹æ个urlè¿è¡ç¹å«å¤çï¼æ¤urlåæ°ä¸ºthis.$u.get(url)ä¸çurlå¼ |
|---|
| | | if (config.url == '/api/User/login') config.header.noToken = true; |
|---|
| | | // æåéè¦å°configè¿è¡return |
|---|
| | | return config; |
|---|
| | | // å¦æreturnä¸ä¸ªfalseå¼ï¼åä¼åæ¶æ¬æ¬¡è¯·æ± |
|---|
| | | // if(config.url == '/user/rest') return false; // åæ¶ææ¬¡è¯·æ± |
|---|
| | | } |
|---|
| | | |
|---|
| | | // ååºæ¦æªï¼å¤æç¶æç æ¯å¦éè¿ |
|---|
| | | Vue.prototype.$u.http.interceptor.response = (res) => { |
|---|
| | | if(!res.statusCode){ |
|---|
| | | if (res.errMsg) { |
|---|
| | | vm.$u.toast("请æ±å¤±è´¥,请æ£æ¥åå°ç¨åºæ¯å¦æå¼,é误信æ¯:" + res.errMsg); |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (res.statusCode == 200) { |
|---|
| | | // res为æå¡ç«¯è¿åå¼ï¼å¯è½æcodeï¼resultçå段 |
|---|
| | | // è¿é对res.resultè¿è¡è¿åï¼å°ä¼å¨this.$u.post(url).then(res => {})çthenåè°ä¸çresçå° |
|---|
| | | // å¦æé
ç½®äºoriginalData为trueï¼è¯·çæè¿éçè¿åå¼ |
|---|
| | | return res.data; |
|---|
| | | } else if (res.statusCode == 401) { |
|---|
| | | // å设201为token失æï¼è¿é跳转ç»å½ |
|---|
| | | vm.$u.toast('éªè¯å¤±è´¥ï¼è¯·éæ°ç»å½'); |
|---|
| | | uni.reLaunch({ |
|---|
| | | url: '/pages/login/login' |
|---|
| | | }); |
|---|
| | | return false; |
|---|
| | | } else if (res.statusCode == 202) { |
|---|
| | | // å¦æè¿åfalseï¼åä¼è°ç¨Promiseçrejectåè°ï¼ |
|---|
| | | // 并å°è¿å
¥this.$u.post(url).then().catch(res=>{})çcatchåè°ä¸ï¼res为æå¡ç«¯çè¿åå¼ |
|---|
| | | vm.$u.post("/api/User/replaceToken").then(res => { |
|---|
| | | if (x.data.status) { |
|---|
| | | vm.$u.vuex('vuex_token', x.data.data) |
|---|
| | | vm.$u.route({ |
|---|
| | | type: "navigateBack", |
|---|
| | | delta: -1 |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | vm.$u.toast('éªè¯è¿æï¼è¯·éæ°ç»å½'); |
|---|
| | | uni.reLaunch({ |
|---|
| | | url: '/pages/login/login' |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }).catch(err => { |
|---|
| | | uni.reLaunch({ |
|---|
| | | url: '/pages/login/login' |
|---|
| | | }); |
|---|
| | | }) |
|---|
| | | // uni.request({ |
|---|
| | | // url: "http://192.168.12.245:8099/api/User/replaceToken", |
|---|
| | | // param: {}, |
|---|
| | | // method: 'POST', |
|---|
| | | // responseType: "text", |
|---|
| | | // header: { |
|---|
| | | // Authorization: "Bearer " + vm.vuex_token |
|---|
| | | // }, |
|---|
| | | // async: false, |
|---|
| | | // success: function(x) { |
|---|
| | | // if (x.data.status) { |
|---|
| | | // vm.$u.vuex('vuex_token',x.data.data) |
|---|
| | | // vm.$u.route({ |
|---|
| | | // type: "navigateBack", |
|---|
| | | // delta: -1 |
|---|
| | | // }) |
|---|
| | | // } else { |
|---|
| | | // console.log(x.data.message); |
|---|
| | | // vm.$u.toast('éªè¯è¿æï¼è¯·éæ°ç»å½'); |
|---|
| | | // setTimeout(() => { |
|---|
| | | // // æ¤ä¸ºuViewçæ¹æ³ï¼è¯¦è§è·¯ç±ç¸å
³ææ¡£ |
|---|
| | | // vm.$u.route('/pages/user/login') |
|---|
| | | // }, 1500) |
|---|
| | | // } |
|---|
| | | // }, |
|---|
| | | // errror: function(ex) { |
|---|
| | | // console.log(ex); |
|---|
| | | // uni.reLaunch({ |
|---|
| | | // url: '/pages/user/login' |
|---|
| | | // }); |
|---|
| | | // }, |
|---|
| | | // }); |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | install, |
|---|
| | | baseUrl |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | |
|---|
| | | .uni-flex { |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-flex-row { |
|---|
| | | @extend .uni-flex; |
|---|
| | | flex-direction: row; |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-flex-column { |
|---|
| | | @extend .uni-flex; |
|---|
| | | flex-direction: column; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-color-gary { |
|---|
| | | color: #3b4144; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* æ é¢ */ |
|---|
| | | .uni-title { |
|---|
| | | display: flex; |
|---|
| | | margin-bottom: $uni-spacing-col-base; |
|---|
| | | font-size: $uni-font-size-lg; |
|---|
| | | font-weight: bold; |
|---|
| | | color: #3b4144; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-title-sub { |
|---|
| | | display: flex; |
|---|
| | | // margin-bottom: $uni-spacing-col-base; |
|---|
| | | font-size: $uni-font-size-base; |
|---|
| | | font-weight: 500; |
|---|
| | | color: #3b4144; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* æè¿° é¢å¤ææ¬ */ |
|---|
| | | .uni-note { |
|---|
| | | margin-top: 10px; |
|---|
| | | color: #999; |
|---|
| | | font-size: $uni-font-size-sm; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* å表å
容 */ |
|---|
| | | .uni-list-box { |
|---|
| | | @extend .uni-flex-row; |
|---|
| | | flex: 1; |
|---|
| | | margin-top: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* ç¥ç¼©å¾ */ |
|---|
| | | .uni-thumb { |
|---|
| | | flex-shrink: 0; |
|---|
| | | margin-right: $uni-spacing-row-base; |
|---|
| | | width: 125px; |
|---|
| | | height: 75px; |
|---|
| | | border-radius: $uni-border-radius-lg; |
|---|
| | | overflow: hidden; |
|---|
| | | border: 1px #f5f5f5 solid; |
|---|
| | | image { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-media-box { |
|---|
| | | @extend .uni-flex-row; |
|---|
| | | // margin-bottom: $uni-spacing-col-base; |
|---|
| | | border-radius: $uni-border-radius-lg; |
|---|
| | | overflow: hidden; |
|---|
| | | .uni-thumb { |
|---|
| | | margin: 0; |
|---|
| | | margin-left: 4px; |
|---|
| | | flex-shrink: 1; |
|---|
| | | width: 33%; |
|---|
| | | border-radius:0; |
|---|
| | | &:first-child { |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* å
容 */ |
|---|
| | | .uni-content { |
|---|
| | | @extend .uni-flex-column; |
|---|
| | | justify-content: space-between; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* å表footer */ |
|---|
| | | .uni-footer { |
|---|
| | | @extend .uni-flex-row; |
|---|
| | | justify-content: space-between; |
|---|
| | | margin-top: $uni-spacing-col-lg; |
|---|
| | | } |
|---|
| | | .uni-footer-text { |
|---|
| | | font-size: $uni-font-size-sm; |
|---|
| | | color: $uni-text-color-grey; |
|---|
| | | margin-left: 5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* æ ç¾ */ |
|---|
| | | |
|---|
| | | .uni-tag { |
|---|
| | | flex-shrink: 0; |
|---|
| | | padding: 0 5px; |
|---|
| | | border: 1px $uni-border-color solid; |
|---|
| | | margin-right: $uni-spacing-row-sm; |
|---|
| | | border-radius: $uni-border-radius-base; |
|---|
| | | background: $uni-bg-color-grey; |
|---|
| | | color: $uni-text-color; |
|---|
| | | font-size: $uni-font-size-sm; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* é¾æ¥ */ |
|---|
| | | .uni-link { |
|---|
| | | margin-left: 10px; |
|---|
| | | color: $uni-text-color; |
|---|
| | | text-decoration: underline; |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "99999", |
|---|
| | | "name": "Section", |
|---|
| | | "desc": "æ é¢æ ", |
|---|
| | | "edition": "0.0.1", |
|---|
| | | "url": "section", |
|---|
| | | "type": "å¸å±ç»ä»¶", |
|---|
| | | "path": "https://ext.dcloud.net.cn/plugin?id=", |
|---|
| | | "hidden": true, |
|---|
| | | "test":true, |
|---|
| | | "update_log": [] |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ### Section æ é¢æ |
|---|
| | | |
|---|
| | | æ é¢æ ï¼ç¨äºæ¾ç¤ºæ é¢ï¼ç»ä»¶åï¼``uni-section``ï¼ä»£ç åï¼ uSectionã |
|---|
| | | |
|---|
| | | ### 使ç¨æ¹å¼ |
|---|
| | | |
|---|
| | | å¨ ``script`` ä¸å¼ç¨ç»ä»¶ |
|---|
| | | |
|---|
| | | ```javascript |
|---|
| | | import uniSection from "@/components/uni-section/uni-section.vue" |
|---|
| | | export default { |
|---|
| | | components: {uniSection} |
|---|
| | | } |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | å¨ ``template`` ä¸ä½¿ç¨ç»ä»¶ |
|---|
| | | |
|---|
| | | ```html |
|---|
| | | <uni-section title="åªæ主æ é¢"></uni-section> |
|---|
| | | <uni-section title="ç«çº¿è£
饰" sub-title="å¯æ é¢" type="line"></uni-section> |
|---|
| | | <uni-section title="åå½¢è£
饰" sub-title="å¯æ é¢" type="circle"></uni-section> |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### å±æ§è¯´æ |
|---|
| | | |
|---|
| | | |å±æ§å |ç±»å |é»è®¤å¼ |说æ | |
|---|
| | | |--- |---- |--- |--- | |
|---|
| | | |type |String |- |æ é¢è£
饰类å ï¼å¯éå¼ï¼lineï¼ç«çº¿ï¼ãcircleï¼åå½¢ï¼| |
|---|
| | | |title |String |- |主æ é¢ | |
|---|
| | | |sub-title |String |- |å¯æ é¢ | |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="uni-section" nvue> |
|---|
| | | <view v-if="type" class="uni-section__head"> |
|---|
| | | <view :class="type" class="uni-section__head-tag" /> |
|---|
| | | </view> |
|---|
| | | <view class="uni-section__content"> |
|---|
| | | <text :class="{'distraction':!subTitle}" class="uni-section__content-title">{{ title }}</text> |
|---|
| | | <text v-if="subTitle" class="uni-section__content-sub">{{ subTitle }}</text> |
|---|
| | | </view> |
|---|
| | | <slot /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Section æ é¢æ |
|---|
| | | * @description æ é¢æ |
|---|
| | | * @property {String} type = [line|circle] æ é¢è£
饰类å |
|---|
| | | * @value line ç«çº¿ |
|---|
| | | * @value circle åå½¢ |
|---|
| | | * @property {String} title 主æ é¢ |
|---|
| | | * @property {String} subTitle å¯æ é¢ |
|---|
| | | */ |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'UniSection', |
|---|
| | | props: { |
|---|
| | | type: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | subTitle: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return {} |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | title(newVal) { |
|---|
| | | if (uni.report && newVal !== '') { |
|---|
| | | uni.report('title', newVal) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | onClick() { |
|---|
| | | this.$emit('click') |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .uni-section { |
|---|
| | | position: relative; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | margin-top: 10px; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | padding: 0 10px; |
|---|
| | | height: 50px; |
|---|
| | | background-color: $uni-bg-color-grey; |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | // border-bottom-color: $uni-border-color; |
|---|
| | | // border-bottom-style: solid; |
|---|
| | | // border-bottom-width: 0.5px; |
|---|
| | | /* #endif */ |
|---|
| | | font-weight: normal; |
|---|
| | | } |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | // .uni-section:after { |
|---|
| | | // position: absolute; |
|---|
| | | // bottom: 0; |
|---|
| | | // right: 0; |
|---|
| | | // left: 0; |
|---|
| | | // height: 1px; |
|---|
| | | // content: ''; |
|---|
| | | // -webkit-transform: scaleY(.5); |
|---|
| | | // transform: scaleY(.5); |
|---|
| | | // background-color: $uni-border-color; |
|---|
| | | // } |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | .uni-section__head { |
|---|
| | | flex-direction: row; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | margin-right: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .line { |
|---|
| | | height: 15px; |
|---|
| | | background-color: $uni-text-color-disable; |
|---|
| | | border-radius: 5px; |
|---|
| | | width: 3px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .circle { |
|---|
| | | width: 8px; |
|---|
| | | height: 8px; |
|---|
| | | border-top-right-radius: 50px; |
|---|
| | | border-top-left-radius: 50px; |
|---|
| | | border-bottom-left-radius: 50px; |
|---|
| | | border-bottom-right-radius: 50px; |
|---|
| | | background-color: $uni-text-color-disable; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-section__content { |
|---|
| | | flex-direction: column; |
|---|
| | | flex: 1; |
|---|
| | | color: $uni-text-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-section__content-title { |
|---|
| | | font-size: $uni-font-size-base; |
|---|
| | | color: $uni-text-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .distraction { |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-section__content-sub { |
|---|
| | | font-size: $uni-font-size-sm; |
|---|
| | | color: $uni-text-color-grey; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import Vue from 'vue' |
|---|
| | | import App from './App' |
|---|
| | | |
|---|
| | | Vue.config.productionTip = false |
|---|
| | | |
|---|
| | | App.mpType = 'app' |
|---|
| | | |
|---|
| | | // å°è£
çå±ç¤ºæ¶æ¯æ示çæ¹æ³ |
|---|
| | | uni.$showMsg = function (title = 'æ°æ®å 载失败ï¼', duration = 1500) { |
|---|
| | | uni.showToast({ |
|---|
| | | title, |
|---|
| | | duration, |
|---|
| | | icon: 'none', |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¼å
¥å
¨å±uView |
|---|
| | | import uView from 'uview-ui' |
|---|
| | | Vue.use(uView); |
|---|
| | | // å¼å
¥å
¨å±TuniaoUI |
|---|
| | | import TuniaoUI from 'tuniao-ui' |
|---|
| | | Vue.use(TuniaoUI) |
|---|
| | | // httpæ¦æªå¨ï¼æ¤ä¸ºéè¦å å
¥çå
容ï¼å¦æä¸æ¯åå¨commonç®å½ï¼è¯·èªè¡ä¿®æ¹å¼å
¥è·¯å¾ |
|---|
| | | import httpInterceptor from '@/common/http.interceptor.js' |
|---|
| | | const app = new Vue({ |
|---|
| | | ...App |
|---|
| | | }) |
|---|
| | | // è¿ééè¦åå¨æåï¼æ¯ä¸ºäºçVueå建对象å®æï¼å¼å
¥"app"对象(ä¹å³é¡µé¢ç"this"å®ä¾) |
|---|
| | | Vue.use(httpInterceptor, app) |
|---|
| | | app.$mount() |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "name" : "WMS-PDA", |
|---|
| | | "appid" : "__UNI__4D0008D", |
|---|
| | | "description" : "", |
|---|
| | | "versionName" : "8", |
|---|
| | | "versionCode" : 8, |
|---|
| | | "transformPx" : false, |
|---|
| | | /* 5+Appç¹æç¸å
³ */ |
|---|
| | | "app-plus" : { |
|---|
| | | "safearea" : { |
|---|
| | | "bottom" : { |
|---|
| | | "offset" : "none" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "usingComponents" : true, |
|---|
| | | "nvueCompiler" : "uni-app", |
|---|
| | | "compilerVersion" : 3, |
|---|
| | | "splashscreen" : { |
|---|
| | | "alwaysShowBeforeRender" : true, |
|---|
| | | "waiting" : true, |
|---|
| | | "autoclose" : true, |
|---|
| | | "delay" : 0 |
|---|
| | | }, |
|---|
| | | /* 模åé
ç½® */ |
|---|
| | | "modules" : { |
|---|
| | | "Barcode" : {}, |
|---|
| | | "Bluetooth" : {} |
|---|
| | | }, |
|---|
| | | /* åºç¨åå¸ä¿¡æ¯ */ |
|---|
| | | "distribute" : { |
|---|
| | | /* androidæå
é
ç½® */ |
|---|
| | | "android" : { |
|---|
| | | "permissions" : [ |
|---|
| | | "<uses-feature android:name=\"android.hardware.camera\"/>", |
|---|
| | | "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.CAMERA\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.READ_LOGS\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.VIBRATE\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | /* iosæå
é
ç½® */ |
|---|
| | | "ios" : { |
|---|
| | | "dSYMs" : false |
|---|
| | | }, |
|---|
| | | /* SDKé
ç½® */ |
|---|
| | | "sdkConfigs" : { |
|---|
| | | "ad" : {} |
|---|
| | | }, |
|---|
| | | "icons" : { |
|---|
| | | "android" : { |
|---|
| | | "hdpi" : "unpackage/res/icons/72x72.png", |
|---|
| | | "xhdpi" : "unpackage/res/icons/96x96.png", |
|---|
| | | "xxhdpi" : "unpackage/res/icons/144x144.png", |
|---|
| | | "xxxhdpi" : "unpackage/res/icons/192x192.png" |
|---|
| | | }, |
|---|
| | | "ios" : { |
|---|
| | | "appstore" : "unpackage/res/icons/1024x1024.png", |
|---|
| | | "ipad" : { |
|---|
| | | "app" : "unpackage/res/icons/76x76.png", |
|---|
| | | "app@2x" : "unpackage/res/icons/152x152.png", |
|---|
| | | "notification" : "unpackage/res/icons/20x20.png", |
|---|
| | | "notification@2x" : "unpackage/res/icons/40x40.png", |
|---|
| | | "proapp@2x" : "unpackage/res/icons/167x167.png", |
|---|
| | | "settings" : "unpackage/res/icons/29x29.png", |
|---|
| | | "settings@2x" : "unpackage/res/icons/58x58.png", |
|---|
| | | "spotlight" : "unpackage/res/icons/40x40.png", |
|---|
| | | "spotlight@2x" : "unpackage/res/icons/80x80.png" |
|---|
| | | }, |
|---|
| | | "iphone" : { |
|---|
| | | "app@2x" : "unpackage/res/icons/120x120.png", |
|---|
| | | "app@3x" : "unpackage/res/icons/180x180.png", |
|---|
| | | "notification@2x" : "unpackage/res/icons/40x40.png", |
|---|
| | | "notification@3x" : "unpackage/res/icons/60x60.png", |
|---|
| | | "settings@2x" : "unpackage/res/icons/58x58.png", |
|---|
| | | "settings@3x" : "unpackage/res/icons/87x87.png", |
|---|
| | | "spotlight@2x" : "unpackage/res/icons/80x80.png", |
|---|
| | | "spotlight@3x" : "unpackage/res/icons/120x120.png" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | /* å¿«åºç¨ç¹æç¸å
³ */ |
|---|
| | | "quickapp" : {}, |
|---|
| | | /* å°ç¨åºç¹æç¸å
³ */ |
|---|
| | | "mp-weixin" : { |
|---|
| | | "appid" : "wxc256e348c4032ebd", |
|---|
| | | "setting" : { |
|---|
| | | "urlCheck" : false |
|---|
| | | }, |
|---|
| | | "usingComponents" : true |
|---|
| | | }, |
|---|
| | | "mp-alipay" : { |
|---|
| | | "usingComponents" : true |
|---|
| | | }, |
|---|
| | | "mp-baidu" : { |
|---|
| | | "usingComponents" : true |
|---|
| | | }, |
|---|
| | | "mp-toutiao" : { |
|---|
| | | "usingComponents" : true |
|---|
| | | }, |
|---|
| | | "h5" : { |
|---|
| | | "template" : "template.h5.html", |
|---|
| | | "router" : { |
|---|
| | | "mode" : "history" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "fallbackLocale" : "zh-Hans", |
|---|
| | | "android" : { |
|---|
| | | "hardwareAccelerated" : true, |
|---|
| | | "keyboardHideMode" : "adjustPan" |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "name": "PDA", |
|---|
| | | "lockfileVersion": 2, |
|---|
| | | "requires": true, |
|---|
| | | "packages": { |
|---|
| | | "": { |
|---|
| | | "dependencies": { |
|---|
| | | "vue-touch-keyboard": "^0.3.2" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "node_modules/babel-runtime": { |
|---|
| | | "version": "6.26.0", |
|---|
| | | "resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz", |
|---|
| | | "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==", |
|---|
| | | "dependencies": { |
|---|
| | | "core-js": "^2.4.0", |
|---|
| | | "regenerator-runtime": "^0.11.0" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "node_modules/core-js": { |
|---|
| | | "version": "2.6.12", |
|---|
| | | "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz", |
|---|
| | | "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==", |
|---|
| | | "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.", |
|---|
| | | "hasInstallScript": true |
|---|
| | | }, |
|---|
| | | "node_modules/regenerator-runtime": { |
|---|
| | | "version": "0.11.1", |
|---|
| | | "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", |
|---|
| | | "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==" |
|---|
| | | }, |
|---|
| | | "node_modules/vue-touch-keyboard": { |
|---|
| | | "version": "0.3.2", |
|---|
| | | "resolved": "https://registry.npmmirror.com/vue-touch-keyboard/-/vue-touch-keyboard-0.3.2.tgz", |
|---|
| | | "integrity": "sha512-+GAZSMdiPfop2At9fhGLzs2Jodd6BQla4q4Mm+VkpQLUaxmFFU64NWsjxvkkYjncAgbv/oO5wi+rM1X4eVHCbg==", |
|---|
| | | "dependencies": { |
|---|
| | | "babel-runtime": "^6.26.0" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "dependencies": { |
|---|
| | | "babel-runtime": { |
|---|
| | | "version": "6.26.0", |
|---|
| | | "resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz", |
|---|
| | | "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==", |
|---|
| | | "requires": { |
|---|
| | | "core-js": "^2.4.0", |
|---|
| | | "regenerator-runtime": "^0.11.0" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "core-js": { |
|---|
| | | "version": "2.6.12", |
|---|
| | | "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz", |
|---|
| | | "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==" |
|---|
| | | }, |
|---|
| | | "regenerator-runtime": { |
|---|
| | | "version": "0.11.1", |
|---|
| | | "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", |
|---|
| | | "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==" |
|---|
| | | }, |
|---|
| | | "vue-touch-keyboard": { |
|---|
| | | "version": "0.3.2", |
|---|
| | | "resolved": "https://registry.npmmirror.com/vue-touch-keyboard/-/vue-touch-keyboard-0.3.2.tgz", |
|---|
| | | "integrity": "sha512-+GAZSMdiPfop2At9fhGLzs2Jodd6BQla4q4Mm+VkpQLUaxmFFU64NWsjxvkkYjncAgbv/oO5wi+rM1X4eVHCbg==", |
|---|
| | | "requires": { |
|---|
| | | "babel-runtime": "^6.26.0" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "dependencies": { |
|---|
| | | "vue-touch-keyboard": "^0.3.2" |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "easycom": { |
|---|
| | | "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" |
|---|
| | | }, |
|---|
| | | "pages": [ //pagesæ°ç»ä¸ç¬¬ä¸é¡¹è¡¨ç¤ºåºç¨å¯å¨é¡µï¼åèï¼https://uniapp.dcloud.io/collocation/pages |
|---|
| | | { |
|---|
| | | "path": "pages/index/index", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "é¦é¡µ" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/home/home", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "æç" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/login/login", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "ç»å½" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | "path": "pages/stash/index", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "åè½", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/stash/inboundorder", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "ç»ç", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/stash/raworderboxing", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "ç»çå
¥åº", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/stash/outboundorder", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "åºåºå", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/stash/outraworderboxing", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "å¹³åºåºåº", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/stash/boxing", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "WMSå
¥åº", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/stash/InspectIn", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "éæ£å
¥åº", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/stash/AGVFinish", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "AGVå®æ", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/stash/AGVTasks", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "AGVæ¬è¿ä»»å¡", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/stash/InEmpty", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "空箱å
¥åº", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/stash/OutEmpty", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "空箱åºåº", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/stash/pickingMat", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "æ£é", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/stash/TakeStock", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "çç¹", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/stash/TakeStockOrder", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "çç¹å", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/stash/QueryData", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "æ¥è¯¢", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/stash/receiveorder", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "æ¶è´§", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/stash/receiveorderoutbound", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "æ¶è´§å", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/stash/OutProOrder", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "åºè´§", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/stash/ProOutOrderView", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "æååºè´§", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/stash/ProEmptyBack", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "空æ¡ååº", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/stash/ProBack", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "ä½æéåº", |
|---|
| | | "enablePullDownRefresh": false |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | "globalStyle": { |
|---|
| | | "navigationBarTextStyle": "black", |
|---|
| | | "navigationBarTitleText": "uView", |
|---|
| | | "navigationBarBackgroundColor": "#F8F8F8", |
|---|
| | | "backgroundColor": "#F8F8F8" |
|---|
| | | }, |
|---|
| | | "tabBar": { |
|---|
| | | "color": "#909399", |
|---|
| | | "selectedColor": "#303133", |
|---|
| | | "borderStyle": "black", |
|---|
| | | "backgroundColor": "#ffffff", |
|---|
| | | "list": [{ |
|---|
| | | "pagePath": "pages/index/index", |
|---|
| | | "iconPath": "static/index.png", |
|---|
| | | "selectedIconPath": "static/index-selected.png", |
|---|
| | | "text": "é¦é¡µ" |
|---|
| | | }, { |
|---|
| | | "pagePath": "pages/home/home", |
|---|
| | | "iconPath": "static/center.png", |
|---|
| | | "selectedIconPath": "static/center-selected.png", |
|---|
| | | "text": "æ" |
|---|
| | | }] |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="page"> |
|---|
| | | <view class="top"> |
|---|
| | | <view class="background"></view> |
|---|
| | | </view> |
|---|
| | | <view class="user-card"> |
|---|
| | | <view class="card"> |
|---|
| | | <view class="top"> |
|---|
| | | <view class="userImage"> |
|---|
| | | <!-- <open-data type="userAvatarUrl"></open-data> --> |
|---|
| | | <u-avatar :src="src" size="146"></u-avatar> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view class="bottom" @tap.native="Login"> |
|---|
| | | <view class="left"> |
|---|
| | | <view class="user-text"> |
|---|
| | | <!-- <open-data type="userNickName"></open-data> --> |
|---|
| | | <text style="text-align: center;">{{userNickName}}</text> |
|---|
| | | </view> |
|---|
| | | <!-- <view class="user-phone"> 171****4133 </view> --> |
|---|
| | | </view> |
|---|
| | | <view class="right flex-center"> |
|---|
| | | <u-icon class="icon" name="arrow-right"></u-icon> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <!-- <view class="settings" @click="settings"> |
|---|
| | | <view class="left"> |
|---|
| | | <view class="settings-text"> |
|---|
| | | <open-data type="userNickName"></open-data> |
|---|
| | | <text style="text-align: center;">设置</text> |
|---|
| | | </view> |
|---|
| | | <view class="user-phone"> 171****4133 </view> |
|---|
| | | </view> |
|---|
| | | <view class="right flex-center"> |
|---|
| | | <u-icon class="icon" name="arrow-right"></u-icon> |
|---|
| | | </view> |
|---|
| | | </view> --> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view class="list-card"> |
|---|
| | | </view> |
|---|
| | | <view class="quit flex-center"> |
|---|
| | | <!-- <view class="btn flex-center" @click="LastLogin"> |
|---|
| | | æ´æ°ç¨åº |
|---|
| | | </view> --> |
|---|
| | | <view class="btn flex-center" @click="LastLogin"> |
|---|
| | | éåºç»å½ |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .top { |
|---|
| | | height: 250rpx; |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | .background { |
|---|
| | | background-color: #5199ff; |
|---|
| | | border-bottom-left-radius: 22px; |
|---|
| | | border-bottom-right-radius: 22px; |
|---|
| | | position: absolute; |
|---|
| | | height: 180rpx; |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .icon { |
|---|
| | | color: #96a1ae; |
|---|
| | | font-size: 20rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .user-card { |
|---|
| | | height: 170rpx; |
|---|
| | | padding: 0 15px; |
|---|
| | | |
|---|
| | | .card { |
|---|
| | | position: relative; |
|---|
| | | bottom: 62px; |
|---|
| | | height: 250rpx; |
|---|
| | | background-color: white; |
|---|
| | | border-radius: 5px; |
|---|
| | | |
|---|
| | | .top { |
|---|
| | | height: 30%; |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | .userImage { |
|---|
| | | position: absolute; |
|---|
| | | bottom: 24%; |
|---|
| | | left: 10%; |
|---|
| | | width: 150rpx; |
|---|
| | | height: 150rpx; |
|---|
| | | overflow: hidden; |
|---|
| | | border-radius: 50%; |
|---|
| | | border: 2px solid white; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .bottom { |
|---|
| | | display: flex; |
|---|
| | | height: 70%; |
|---|
| | | |
|---|
| | | .left { |
|---|
| | | width: 80%; |
|---|
| | | height: 100%; |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | .user-text { |
|---|
| | | width: 100%; |
|---|
| | | font-size: 1.6em; |
|---|
| | | padding-left: 80rpx; |
|---|
| | | height: 50%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .user-phone { |
|---|
| | | width: 100%; |
|---|
| | | font-size: 1.3em; |
|---|
| | | padding-left: 80rpx; |
|---|
| | | height: 50%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .right { |
|---|
| | | width: 20%; |
|---|
| | | height: 50%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .right2 { |
|---|
| | | width: 10%; |
|---|
| | | height: 10%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .settings { |
|---|
| | | display: flex; |
|---|
| | | height: 70%; |
|---|
| | | |
|---|
| | | .left { |
|---|
| | | width: 80%; |
|---|
| | | height: 50%; |
|---|
| | | position: relative; |
|---|
| | | margin-left: 5%; |
|---|
| | | |
|---|
| | | .settings-text { |
|---|
| | | width: 100%; |
|---|
| | | font-size: 1.2em; |
|---|
| | | padding-left: 80rpx; |
|---|
| | | height: 50%; |
|---|
| | | align-items: center; |
|---|
| | | padding-top: 10px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .right { |
|---|
| | | width: 20%; |
|---|
| | | height: 50%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .list-card { |
|---|
| | | padding: 0 15px; |
|---|
| | | |
|---|
| | | .card { |
|---|
| | | border-radius: 5px; |
|---|
| | | position: relative; |
|---|
| | | background-color: white; |
|---|
| | | border-radius: 5px; |
|---|
| | | padding: 5px 30px; |
|---|
| | | |
|---|
| | | .item { |
|---|
| | | display: flex; |
|---|
| | | height: 120rpx; |
|---|
| | | |
|---|
| | | .left { |
|---|
| | | width: 15%; |
|---|
| | | |
|---|
| | | image { |
|---|
| | | width: 70rpx; |
|---|
| | | height: 70rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .center { |
|---|
| | | width: 65%; |
|---|
| | | display: flex; |
|---|
| | | justify-content: start; |
|---|
| | | align-items: center; |
|---|
| | | font-size: 1.1em; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .right { |
|---|
| | | width: 20%; |
|---|
| | | justify-content: flex-end; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .item-bottom-solid { |
|---|
| | | border-bottom: 1px solid #d4d6da; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .quit { |
|---|
| | | height: 100rpx; |
|---|
| | | margin-top: 50px; |
|---|
| | | |
|---|
| | | .btn { |
|---|
| | | background-color: #4f99ff; |
|---|
| | | border-radius: 30px; |
|---|
| | | width: 80%; |
|---|
| | | color: white; |
|---|
| | | font-size: 1.2em; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .flex-center { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | //import { } from "@/common/api/{$}.js"; |
|---|
| | | import httpInterceptor from '@/common/http.interceptor.js' |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | src: "", |
|---|
| | | userNickName: '请ç»å½', |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | //çå¬é¡µé¢åå§åï¼å
¶åæ°å onLoad åæ°ï¼ä¸ºä¸ä¸ªé¡µé¢ä¼ éçæ°æ®ï¼åæ°ç±»å为 Objectï¼ç¨äºé¡µé¢ä¼ åï¼ï¼è§¦åæ¶æºæ©äº onLoad |
|---|
| | | onInit() {}, |
|---|
| | | //çå¬é¡µé¢å è½½ï¼å
¶åæ°ä¸ºä¸ä¸ªé¡µé¢ä¼ éçæ°æ®ï¼åæ°ç±»å为 Objectï¼ç¨äºé¡µé¢ä¼ åï¼ |
|---|
| | | onLoad() { |
|---|
| | | let isLogin = this.hasLogin(); |
|---|
| | | if (isLogin) { |
|---|
| | | let haslogin = uni.getStorageSync('jo_user') |
|---|
| | | this.userNickName = haslogin.userName; |
|---|
| | | this.src = httpInterceptor.baseUrl + "/" + haslogin.img; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | //çå¬é¡µé¢å次渲æå®æã注æå¦æ渲æé度快ï¼ä¼å¨é¡µé¢è¿å
¥å¨ç»å®æå触å |
|---|
| | | onReady() {}, |
|---|
| | | //çå¬é¡µé¢æ¾ç¤ºã页é¢æ¯æ¬¡åºç°å¨å±å¹ä¸é½è§¦åï¼å
æ¬ä»ä¸çº§é¡µé¢ç¹è¿åé²åºå½åé¡µé¢ |
|---|
| | | beforeDestroy() {}, |
|---|
| | | //页é¢æ»å¨å°åºé¨çäºä»¶ï¼ä¸æ¯scroll-viewæ»å°åºï¼ï¼å¸¸ç¨äºä¸æä¸ä¸é¡µæ°æ®ã |
|---|
| | | onReachBottom() {}, |
|---|
| | | onShareAppMessage(res) {}, |
|---|
| | | created() {}, |
|---|
| | | methods: { |
|---|
| | | hasLogin() { |
|---|
| | | let haslogin = uni.getStorageSync('jo_user') |
|---|
| | | if (haslogin == null || haslogin == "") { |
|---|
| | | return false |
|---|
| | | } else { |
|---|
| | | return true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | LastLogin() { |
|---|
| | | //uni.clearStorage(); |
|---|
| | | uni.removeStorageSync('jo_id_token'); |
|---|
| | | uni.removeStorageSync('jo_user'); |
|---|
| | | uni.removeStorageSync('jo_userImg'); |
|---|
| | | this.$u.route('/pages/login/login'); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | Login() { |
|---|
| | | this.$u.route('/pages/login/login'); |
|---|
| | | }, |
|---|
| | | settings(){ |
|---|
| | | this.$u.route('/pages/index/settings'); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <u-card :title="title" > --> |
|---|
| | | <view class="" slot="body"> |
|---|
| | | <!-- <view v-for="(item,index) in tree" :key="item.id"> --> |
|---|
| | | <u-grid :col="2"> |
|---|
| | | <u-grid-item @tap="clickCoupon(item.url,item.menuId,item.description,item.menuName)" v-for="(item) in tree" |
|---|
| | | :key="item.menuId"> |
|---|
| | | <u-icon :name="item.icon" custom-prefix="custom-icon" size="50" color="#888888"> </u-icon> |
|---|
| | | <view class="grid-text">{{item.menuName}}</view> |
|---|
| | | </u-grid-item> |
|---|
| | | </u-grid> |
|---|
| | | <!-- </view> --> |
|---|
| | | <u-toast ref="uToast" /> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <!-- </u-card> --> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { |
|---|
| | | config |
|---|
| | | } from '../../common/config.js' |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // title: 'æä½åè½' |
|---|
| | | datas: [], |
|---|
| | | tree: [], |
|---|
| | | version: "" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onShow() { |
|---|
| | | console.log(); |
|---|
| | | |
|---|
| | | uni.getSystemInfo({ |
|---|
| | | success: (res) => { |
|---|
| | | this.version = res.appWgtVersion; |
|---|
| | | // console.log(res); |
|---|
| | | //æ£æµå½åå¹³å°ï¼å¦ææ¯å®ååå¯å¨å®åæ´æ° |
|---|
| | | if (res.platform == "android") { |
|---|
| | | this.AndroidCheckUpdate(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | onLoad() { |
|---|
| | | this.getCurrentTree(); |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | AndroidCheckUpdate: function() { |
|---|
| | | var _this = this; |
|---|
| | | uni.request({ |
|---|
| | | url: this.$u.http.config.baseUrl + '/api/PDA/GetPDAVersion?version=' + this.version, |
|---|
| | | method: 'GET', |
|---|
| | | data: {}, |
|---|
| | | success: res => { |
|---|
| | | if (res.data.data) { |
|---|
| | | |
|---|
| | | uni.showToast({ |
|---|
| | | title: 'ææ°ççæ¬åå¸ï¼æ£æµå°æ¨ç®å为Wifiè¿æ¥ï¼ç¨åºå·²å¯å¨èªå¨æ´æ°ãæ°çæ¬ä¸è½½å®æåå°èªå¨å¼¹åºå®è£
ç¨åºã', |
|---|
| | | mask: false, |
|---|
| | | duration: 5000, |
|---|
| | | icon: "none" |
|---|
| | | }); |
|---|
| | | var dtask = plus.downloader.createDownload( |
|---|
| | | this.$u.http.config.baseUrl + "/api/PDA/DownLoadApp", {}, |
|---|
| | | function(d, status) { |
|---|
| | | // ä¸è½½å®æ |
|---|
| | | if (status == 200) { |
|---|
| | | plus.runtime.install(plus.io.convertLocalFileSystemURL(d |
|---|
| | | .filename), {}, {}, function(error) { |
|---|
| | | uni.showToast({ |
|---|
| | | title: 'å®è£
失败', |
|---|
| | | mask: false, |
|---|
| | | duration: 1500 |
|---|
| | | }); |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | uni.showToast({ |
|---|
| | | title: 'æ´æ°å¤±è´¥', |
|---|
| | | mask: false, |
|---|
| | | duration: 1500 |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | dtask.start(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | fail: () => { |
|---|
| | | console.log('请æ±å¤±è´¥') |
|---|
| | | }, |
|---|
| | | complete: () => {} |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | getCurrentTree(ParentId) { |
|---|
| | | this.$u.post('/api/Sys_Menu/GetTreeMenuPDAStash?ParentId=' + ParentId, {}).then(result => { |
|---|
| | | this.tree = result; |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | getTree(id, data, isRootId) { |
|---|
| | | this.datas.forEach((x) => { |
|---|
| | | if (x.pid == id) { |
|---|
| | | x.lv = data.lv + 1; |
|---|
| | | if (isRootId) { |
|---|
| | | x.rootId = id; |
|---|
| | | } |
|---|
| | | if (!data.children) data.children = []; |
|---|
| | | data.children.push(x); |
|---|
| | | this.getTree(x.id, x, isRootId); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | getPermission(text) { |
|---|
| | | // return true; |
|---|
| | | return this.datas.find(x => x.text == text); |
|---|
| | | }, |
|---|
| | | clickCoupon(url, menuid, warehouseid, menuname) { |
|---|
| | | // console.log("clickCoupon") |
|---|
| | | if (this.hasLogin()) { |
|---|
| | | this.$u.route({ |
|---|
| | | url: url, |
|---|
| | | params: { |
|---|
| | | menuId: menuid, |
|---|
| | | warehouseId: warehouseid, |
|---|
| | | menuName: menuname |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | this.$t.message.loading('ç»å½å¤±æ请éæ°ç»å½') |
|---|
| | | uni.reLaunch({ |
|---|
| | | url: '/pages/login/login' |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | lock() { |
|---|
| | | console.log("lock") |
|---|
| | | if (this.hasLogin()) { |
|---|
| | | this.$u.route("pages/feeding/feeding") |
|---|
| | | } else { |
|---|
| | | this.$t.message.loading('ç»å½å¤±æ请éæ°ç»å½') |
|---|
| | | uni.reLaunch({ |
|---|
| | | url: '/pages/login/login' |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | //å¤ææ¯å¦ç»å½ |
|---|
| | | hasLogin() { |
|---|
| | | let haslogin = uni.getStorageSync('jo_user') |
|---|
| | | if (haslogin == null || haslogin == "") { |
|---|
| | | return false |
|---|
| | | } else { |
|---|
| | | return true |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .grid-text { |
|---|
| | | font-size: 28rpx; |
|---|
| | | margin-top: 4rpx; |
|---|
| | | color: $u-type-info; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="template-login"> |
|---|
| | | <!-- 顶é¨èªå®ä¹å¯¼èª --> |
|---|
| | | <!-- <tn-nav-bar fixed alpha customBack> |
|---|
| | | <view slot="back" class='tn-custom-nav-bar__back' |
|---|
| | | @click="goBack"> |
|---|
| | | <text class='icon tn-icon-left'></text> |
|---|
| | | <text class='icon tn-icon-home-capsule-fill'></text> |
|---|
| | | </view> |
|---|
| | | </tn-nav-bar> --> |
|---|
| | | |
|---|
| | | <view class="login"> |
|---|
| | | <!-- 顶é¨èæ¯å¾ç--> |
|---|
| | | <view class="login__bg login__bg--top"> |
|---|
| | | <image class="bg" src="/static/login_top2.jpg" mode="widthFix"></image> |
|---|
| | | </view> |
|---|
| | | <view class="login__bg login__bg--top"> |
|---|
| | | <image class="rocket rocket-sussuspension" src="/static/login_top3.png" mode="widthFix"></image> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <view class="login__wrapper"> |
|---|
| | | |
|---|
| | | <!-- è¾å
¥æ¡å
容--> |
|---|
| | | <view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center"> |
|---|
| | | <!-- ç»å½ --> |
|---|
| | | <block v-if="currentModeIndex === 0"> |
|---|
| | | <view |
|---|
| | | class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"> |
|---|
| | | <view class="login__info__item__input__left-icon"> |
|---|
| | | <view class="tn-icon-my"></view> |
|---|
| | | </view> |
|---|
| | | <view class="login__info__item__input__content"> |
|---|
| | | <input maxlength="45" placeholder-class="input-placeholder" v-model="user" |
|---|
| | | placeholder="请è¾å
¥ç»å½ç¨æ·å称" /> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <view |
|---|
| | | class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"> |
|---|
| | | <view class="login__info__item__input__left-icon"> |
|---|
| | | <view class="tn-icon-lock"></view> |
|---|
| | | </view> |
|---|
| | | <view class="login__info__item__input__content"> |
|---|
| | | <input :password="!showPassword" placeholder-class="input-placeholder" v-model="pass" |
|---|
| | | placeholder="请è¾å
¥ç»å½å¯ç " /> |
|---|
| | | </view> |
|---|
| | | <view class="login__info__item__input__right-icon" @click="showPassword = !showPassword"> |
|---|
| | | <view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"> |
|---|
| | | <view class="login__info__item__input__left-icon"> |
|---|
| | | <view class="tn-icon-my"></view> |
|---|
| | | </view> |
|---|
| | | <view class="login__info__item__input__content"> |
|---|
| | | <input maxlength="45" placeholder-class="input-placeholder" v-model="code" |
|---|
| | | placeholder="请è¾å
¥éªè¯ç " /> |
|---|
| | | </view> |
|---|
| | | <view class="login__info__item__input__right-icon u-border" style="width: 30%;" |
|---|
| | | @click="getVierificationCode"> |
|---|
| | | <img v-show="codeImgSrc != ''" :src="codeImgSrc" /> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </block> |
|---|
| | | <!-- 注å --> |
|---|
| | | <view class="login__info__item__input__content" style="margin-top: 20px;"> |
|---|
| | | <uni-data-checkbox multiple v-model="checkbox" :localdata="hobby"></uni-data-checkbox> |
|---|
| | | </view> |
|---|
| | | <view class="login__info__item__button tn-cool-bg-color-7--reverse" |
|---|
| | | @click="currentModeIndex === 0 ? login() : registra()" hover-class="tn-hover" |
|---|
| | | :hover-stay-time="150">{{ currentModeIndex === 0 ? 'ç»å½' : '注å'}}</view> |
|---|
| | | |
|---|
| | | <!-- <view v-if="currentModeIndex === 0" class="login__info__item__tips">å¿è®°å¯ç ?</view> --> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <!-- <tn-tips ref="tips" position="top"></tn-tips> --> |
|---|
| | | <!-- åºé¨èæ¯å¾ç--> |
|---|
| | | <view class="login__bg login__bg--bottom"> |
|---|
| | | <image src="/static/login_bottom_bg.jpg" mode="widthFix"></image> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | var app = getApp(); |
|---|
| | | export default { |
|---|
| | | name: 'login-demo-1', |
|---|
| | | // mixins: [template_page_mixin],* |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // å½åéä¸çæ¨¡å¼ |
|---|
| | | currentModeIndex: 0, |
|---|
| | | // 模å¼éä¸æ»å |
|---|
| | | modeSliderStyle: { |
|---|
| | | left: 0 |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå¯ç |
|---|
| | | showPassword: false, |
|---|
| | | // å计æ¶æ示æå |
|---|
| | | tips: 'è·åéªè¯ç ', |
|---|
| | | email: '', |
|---|
| | | codeImgSrc: '', |
|---|
| | | pass: '', |
|---|
| | | code: '1234', |
|---|
| | | user: '', |
|---|
| | | isDetail: false, |
|---|
| | | hobby: [{ |
|---|
| | | text: 'è®°ä½è´¦å·', |
|---|
| | | value: 1 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | text: 'è®°ä½å¯ç ', |
|---|
| | | value: 2 |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | checkbox: [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | currentModeIndex(value) { |
|---|
| | | const sliderWidth = uni.upx2px(476 / 2) |
|---|
| | | this.modeSliderStyle.left = `${sliderWidth * value}px` |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onLoad(options) { |
|---|
| | | this.getVierificationCode() |
|---|
| | | if (options.id) { |
|---|
| | | this.isDetail = true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | var remAcc = uni.getStorageSync('remAcc'); |
|---|
| | | if (remAcc) { |
|---|
| | | this.checkbox.push(1); |
|---|
| | | } |
|---|
| | | |
|---|
| | | var remPwd = uni.getStorageSync('remPwd'); |
|---|
| | | if (remPwd) { |
|---|
| | | this.checkbox.push(2); |
|---|
| | | } |
|---|
| | | |
|---|
| | | var acc = uni.getStorageSync('acc'); |
|---|
| | | if (acc) { |
|---|
| | | this.user = acc;; |
|---|
| | | } |
|---|
| | | |
|---|
| | | var pwd = uni.getStorageSync('pwd'); |
|---|
| | | if (pwd) { |
|---|
| | | this.pass = pwd; |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | ///è·åéªè¯ç |
|---|
| | | getVierificationCode() { |
|---|
| | | this.$u.get('/api/User/getVierificationCode', {}).then(res => { |
|---|
| | | if (res.img != null) { |
|---|
| | | this.codeImgSrc = "data:image/png;base64," + res.img; |
|---|
| | | this.email = res.uuid; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: 'è·åéªè¯ç 失败请éæ°è·å', |
|---|
| | | type: 'error', |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | // uni.request({ |
|---|
| | | // url:"http://192.168.0.101:8098/api/User/getVierificationCode", |
|---|
| | | // success: (res) => { |
|---|
| | | |
|---|
| | | // } |
|---|
| | | // }) |
|---|
| | | }, |
|---|
| | | login() { |
|---|
| | | if (this.pass == '') { |
|---|
| | | this.$t.message.toast('请è¾å
¥å¯ç ') |
|---|
| | | return; |
|---|
| | | } else if (this.user == '') { |
|---|
| | | this.$t.message.toast('请è¾å
¥ç¨æ·å') |
|---|
| | | return; |
|---|
| | | } else if (this.pass.length < 6) { |
|---|
| | | this.$t.message.toast('å¯ç åºå¤§äº6ä½') |
|---|
| | | return; |
|---|
| | | } else { |
|---|
| | | var userAcc = this.user; |
|---|
| | | var userPwd = this.pass; |
|---|
| | | var checkValues = this.checkbox; |
|---|
| | | var remAcc = this.checkbox.find(x => x == 1); |
|---|
| | | |
|---|
| | | if (remAcc) { |
|---|
| | | uni.setStorage({ |
|---|
| | | key: "remAcc", |
|---|
| | | data: "1", |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | if (uni.getStorageSync('remAcc')) { |
|---|
| | | uni.removeStorageSync('remAcc'); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | var remPwd = this.checkbox.find(x => x == 2); |
|---|
| | | if (remPwd) { |
|---|
| | | uni.setStorage({ |
|---|
| | | key: "remPwd", |
|---|
| | | data: "2", |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | if (uni.getStorageSync('remPwd')) { |
|---|
| | | uni.removeStorageSync('remPwd'); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.$t.message.loading('æ£å¨ç»å½') |
|---|
| | | let userInfo = this.userInfo; |
|---|
| | | let userifno = { |
|---|
| | | UUID: this.email, |
|---|
| | | passWord: this.pass, |
|---|
| | | userName: this.user, |
|---|
| | | verificationCode: this.code |
|---|
| | | } |
|---|
| | | this.$u.post('/api/User/login', { |
|---|
| | | UUID: this.email, |
|---|
| | | passWord: this.pass, |
|---|
| | | userName: this.user, |
|---|
| | | verificationCode: this.code |
|---|
| | | }).then(res => { |
|---|
| | | // this.$u.toast(res.message); |
|---|
| | | this.$t.message.toast(res.message) |
|---|
| | | this.$t.message.closeLoading() |
|---|
| | | uni.setStorage({ |
|---|
| | | key: 'jo_id_token', |
|---|
| | | data: res.data.token, |
|---|
| | | }); |
|---|
| | | uni.setStorage({ |
|---|
| | | key: 'jo_user', |
|---|
| | | data: res.data, |
|---|
| | | }); |
|---|
| | | uni.setStorage({ |
|---|
| | | key: 'jo_userImg', |
|---|
| | | data: res.data.img, |
|---|
| | | }); |
|---|
| | | var acc = checkValues.find(x => x == 1); |
|---|
| | | if (acc) { |
|---|
| | | uni.setStorage({ |
|---|
| | | key: 'acc', |
|---|
| | | data: userAcc, |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | if (uni.getStorage({ |
|---|
| | | key: 'acc' |
|---|
| | | })) { |
|---|
| | | uni.removeStorage({ |
|---|
| | | key: 'acc' |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | var pwd = checkValues.find(x => x == 2); |
|---|
| | | if (pwd) { |
|---|
| | | uni.setStorage({ |
|---|
| | | key: 'pwd', |
|---|
| | | data: userPwd, |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | if (uni.getStorage({ |
|---|
| | | key: 'pwd' |
|---|
| | | })) { |
|---|
| | | uni.removeStorage({ |
|---|
| | | key: 'pwd' |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | setTimeout(() => { |
|---|
| | | this.$u.route({ |
|---|
| | | type: 'reLaunch', |
|---|
| | | url: 'pages/index/index' |
|---|
| | | }) |
|---|
| | | // this.$Router.replace({name:"tabbar"}) |
|---|
| | | }, 200) |
|---|
| | | }).catch(res=>{ |
|---|
| | | this.getVierificationCode(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | codeInput: function(e) { |
|---|
| | | this.code = e.detail.value; |
|---|
| | | }, |
|---|
| | | passInput: function(e) { |
|---|
| | | this.pass = e.detail.value; |
|---|
| | | }, |
|---|
| | | userInput: function(e) { |
|---|
| | | this.user = e.detail.value; |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | // @import '@/static/css/templatePage/custom_nav_bar.scss'; |
|---|
| | | /* æ¬æµ® */ |
|---|
| | | .rocket-sussuspension { |
|---|
| | | animation: suspension 3s ease-in-out infinite; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes suspension { |
|---|
| | | |
|---|
| | | 0%, |
|---|
| | | 100% { |
|---|
| | | transform: translate(0, 0); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 50% { |
|---|
| | | transform: translate(-0.8rem, 1rem); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .login { |
|---|
| | | position: relative; |
|---|
| | | height: 100%; |
|---|
| | | z-index: 1; |
|---|
| | | |
|---|
| | | /* èæ¯å¾ç start */ |
|---|
| | | &__bg { |
|---|
| | | z-index: -1; |
|---|
| | | position: fixed; |
|---|
| | | |
|---|
| | | &--top { |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | width: 100%; |
|---|
| | | |
|---|
| | | .bg { |
|---|
| | | width: 750rpx; |
|---|
| | | will-change: transform; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .rocket { |
|---|
| | | margin: 50rpx 28%; |
|---|
| | | width: 400rpx; |
|---|
| | | will-change: transform; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--bottom { |
|---|
| | | bottom: -10rpx; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | width: 100%; |
|---|
| | | // height: 144px; |
|---|
| | | margin-bottom: env(safe-area-inset-bottom); |
|---|
| | | |
|---|
| | | image { |
|---|
| | | width: 750rpx; |
|---|
| | | will-change: transform; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* èæ¯å¾ç end */ |
|---|
| | | |
|---|
| | | /* å
容 start */ |
|---|
| | | &__wrapper { |
|---|
| | | margin-top: 250rpx; |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* åæ¢ start */ |
|---|
| | | &__mode { |
|---|
| | | position: relative; |
|---|
| | | margin: 0 auto; |
|---|
| | | width: 476rpx; |
|---|
| | | height: 77rpx; |
|---|
| | | background-color: #FFFFFF; |
|---|
| | | box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1); |
|---|
| | | border-radius: 39rpx; |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | height: 77rpx; |
|---|
| | | width: 100%; |
|---|
| | | line-height: 77rpx; |
|---|
| | | text-align: center; |
|---|
| | | font-size: 31rpx; |
|---|
| | | color: #908f8f; |
|---|
| | | letter-spacing: 1em; |
|---|
| | | text-indent: 1em; |
|---|
| | | z-index: 2; |
|---|
| | | transition: all 0.4s; |
|---|
| | | |
|---|
| | | &--active { |
|---|
| | | font-weight: bold; |
|---|
| | | color: #FFFFFF; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__slider { |
|---|
| | | position: absolute; |
|---|
| | | height: inherit; |
|---|
| | | width: calc(476rpx); |
|---|
| | | border-radius: inherit; |
|---|
| | | box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1); |
|---|
| | | z-index: 1; |
|---|
| | | transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* åæ¢ end */ |
|---|
| | | |
|---|
| | | /* ç»å½æ³¨åä¿¡æ¯ start */ |
|---|
| | | &__info { |
|---|
| | | margin: 0 30rpx; |
|---|
| | | margin-top: 105rpx; |
|---|
| | | padding: 30rpx 51rpx; |
|---|
| | | padding-bottom: 0; |
|---|
| | | border-radius: 20rpx; |
|---|
| | | background-color: #ffff; |
|---|
| | | box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1); |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | |
|---|
| | | &__input { |
|---|
| | | margin-top: 59rpx; |
|---|
| | | width: 100%; |
|---|
| | | height: 77rpx; |
|---|
| | | border: 1rpx solid #E6E6E6; |
|---|
| | | border-radius: 39rpx; |
|---|
| | | |
|---|
| | | &__left-icon { |
|---|
| | | width: 10%; |
|---|
| | | font-size: 44rpx; |
|---|
| | | margin-left: 20rpx; |
|---|
| | | color: #AAAAAA; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__content { |
|---|
| | | width: 80%; |
|---|
| | | padding-left: 10rpx; |
|---|
| | | |
|---|
| | | &--verify-code { |
|---|
| | | width: 56%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | input { |
|---|
| | | font-size: 24rpx; |
|---|
| | | // letter-spacing: 0.1em; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__right-icon { |
|---|
| | | width: 10%; |
|---|
| | | font-size: 44rpx; |
|---|
| | | margin-right: 20rpx; |
|---|
| | | color: #AAAAAA; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__right-verify-code { |
|---|
| | | width: 34%; |
|---|
| | | margin-right: 20rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__button { |
|---|
| | | margin-top: 75rpx; |
|---|
| | | margin-bottom: 39rpx; |
|---|
| | | width: 100%; |
|---|
| | | height: 77rpx; |
|---|
| | | text-align: center; |
|---|
| | | font-size: 31rpx; |
|---|
| | | font-weight: bold; |
|---|
| | | line-height: 77rpx; |
|---|
| | | letter-spacing: 1em; |
|---|
| | | text-indent: 1em; |
|---|
| | | border-radius: 39rpx; |
|---|
| | | box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35); |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__tips { |
|---|
| | | margin: 30rpx 0; |
|---|
| | | color: #AAAAAA; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* ç»å½æ³¨åä¿¡æ¯ end */ |
|---|
| | | |
|---|
| | | /* ç»å½æ¹å¼åæ¢ start */ |
|---|
| | | &__way { |
|---|
| | | margin: 0 auto; |
|---|
| | | margin-top: 110rpx; |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | &--icon { |
|---|
| | | width: 77rpx; |
|---|
| | | height: 77rpx; |
|---|
| | | font-size: 50rpx; |
|---|
| | | border-radius: 100rpx; |
|---|
| | | margin-bottom: 18rpx; |
|---|
| | | position: relative; |
|---|
| | | z-index: 1; |
|---|
| | | |
|---|
| | | &::after { |
|---|
| | | content: " "; |
|---|
| | | position: absolute; |
|---|
| | | z-index: -1; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | left: 0; |
|---|
| | | bottom: 0; |
|---|
| | | border-radius: inherit; |
|---|
| | | opacity: 1; |
|---|
| | | transform: scale(1, 1); |
|---|
| | | background-size: 100% 100%; |
|---|
| | | background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* ç»å½æ¹å¼åæ¢ end */ |
|---|
| | | /* å
容 end */ |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | /deep/.input-placeholder { |
|---|
| | | font-size: 24rpx; |
|---|
| | | color: #E6E6E6; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="180"> |
|---|
| | | <uni-forms-item label="æçæ¡ç :"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«ææçæ¡ç " ref='midInput' :focus="!focus" v-model="barcode" |
|---|
| | | @input="barcodeInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="AGVFinish" type="primary" size="default" style="margin-top: 2%;">确认å®æ</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | </view> |
|---|
| | | <u-toast ref="uToast" /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const innerAudioContext = uni.createInnerAudioContext(); |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | focus: false, |
|---|
| | | barcode: "", |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onShow() {}, |
|---|
| | | onLoad(res) { |
|---|
| | | this.focus = false; |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // voiceSpeech(src) { |
|---|
| | | // innerAudioContext.src = src; // '../../static/success.mp3'; |
|---|
| | | // innerAudioContext.play(); |
|---|
| | | // }, |
|---|
| | | barcodeInput() { |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.barcode.length > 0) { |
|---|
| | | this.focus = true; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | AGVFinish() { |
|---|
| | | if (this.barcode == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«ææçç ", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.$u.post('http://10.30.4.92:9291/api/CTU_AGV/AGVFinish?barcode=' + this.barcode).then( |
|---|
| | | res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "å®ææå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | this.barcode = ""; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '@/common/uni-ui.scss'; |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | display: flex; |
|---|
| | | height: 150px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content-text { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .itemstyle { |
|---|
| | | margin-top: 30px; |
|---|
| | | margin-left: 5%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .headerstyle { |
|---|
| | | width: 90%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="180"> |
|---|
| | | <uni-forms-item label="æçæ¡ç :"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«ææçæ¡ç " ref='midInput' :focus="!focus" v-model="barcode" |
|---|
| | | @input="barcodeInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item label="å°åç :"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«æå°åç " ref='midInput' :focus="!focus" v-model="address" |
|---|
| | | @input="barcodeInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="AGVTasks" type="primary" size="default" style="margin-top: 2%;">确认å®æ</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | </view> |
|---|
| | | <u-toast ref="uToast" /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const innerAudioContext = uni.createInnerAudioContext(); |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | focus: false, |
|---|
| | | barcode: "", |
|---|
| | | address: "", |
|---|
| | | warehouseId: "", |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onShow() {}, |
|---|
| | | onLoad(res) { |
|---|
| | | this.focus = false; |
|---|
| | | this.warehouseId=res.warehouseId; |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // voiceSpeech(src) { |
|---|
| | | // innerAudioContext.src = src; // '../../static/success.mp3'; |
|---|
| | | // innerAudioContext.play(); |
|---|
| | | // }, |
|---|
| | | barcodeInput() { |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.barcode.length > 0) { |
|---|
| | | this.focus = true; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | AGVTasks() { |
|---|
| | | if (this.barcode == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«ææçç ", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.address == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«æå°åç ", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var postDate = { |
|---|
| | | MainData: { |
|---|
| | | barcode: this.barcode, |
|---|
| | | address: this.address, |
|---|
| | | warehouseId:this.warehouseId, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.$u.post('http://127.0.0.1:9293/api/Task/AGVTasks', postDate).then( |
|---|
| | | res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "ä»»å¡å建æåæå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | this.barcode = ""; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '@/common/uni-ui.scss'; |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | display: flex; |
|---|
| | | height: 150px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content-text { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .itemstyle { |
|---|
| | | margin-top: 30px; |
|---|
| | | margin-left: 5%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .headerstyle { |
|---|
| | | width: 90%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="180"> |
|---|
| | | <uni-forms-item label="æçæ¡ç :"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«ææçæ¡ç " ref='midInput' :focus="!focus" v-model="barcode" |
|---|
| | | @input="barcodeInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="InEmpty" type="primary" size="default" style="margin-top: 2%;">空箱å
¥åº</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | </view> |
|---|
| | | <u-toast ref="uToast" /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const innerAudioContext = uni.createInnerAudioContext(); |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | focus: false, |
|---|
| | | barcode: "", |
|---|
| | | address: "", |
|---|
| | | WarehouseId: "" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onShow() {}, |
|---|
| | | onLoad(res) { |
|---|
| | | this.WarehouseId = res.warehouseId; |
|---|
| | | this.focus = false; |
|---|
| | | if (res.warehouseId == 5) { |
|---|
| | | this.address = "8005"; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // voiceSpeech(src) { |
|---|
| | | // innerAudioContext.src = src; // '../../static/success.mp3'; |
|---|
| | | // innerAudioContext.play(); |
|---|
| | | // }, |
|---|
| | | barcodeInput() { |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.barcode.length > 0) { |
|---|
| | | this.focus = true; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | InEmpty() { |
|---|
| | | if (this.barcode == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«ææçç ", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.$u.post('/api/Task/InEmpty?barcode=' + this.barcode + '&address=' + this.address + '&WarehouseId=' + |
|---|
| | | this.WarehouseId).then( |
|---|
| | | res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "æå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | this.barcode = ""; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '@/common/uni-ui.scss'; |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | display: flex; |
|---|
| | | height: 150px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content-text { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .itemstyle { |
|---|
| | | margin-top: 30px; |
|---|
| | | margin-left: 5%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .headerstyle { |
|---|
| | | width: 90%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <uni-segmented-control style="margin-top: 15rpx;" :current="current" :values="items" @clickItem="onClickItem"> |
|---|
| | | </uni-segmented-control> |
|---|
| | | <view class="content"> |
|---|
| | | <!-- <view v-if="current === 0" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="180"> |
|---|
| | | <uni-forms-item label="æçæ¡ç :"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«ææçæ¡ç " ref='midInput' :focus="!focus" |
|---|
| | | v-model="barcode" @input="barcodeInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item label="å
ç®±æ ç¾:"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«æå
ç®±æ ç¾" ref='midInput' :focus="focus" |
|---|
| | | v-model="materSn" @input="snInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item :label="Testlabel" v-if="Test"> |
|---|
| | | <uni-easyinput type="text" :placeholder="Testplaceholder" ref='midInput' |
|---|
| | | v-model="Initiallife" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="submit" type="primary" size="default" style="margin-top: 2%;">ç»ç</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | <uni-list> |
|---|
| | | |
|---|
| | | <uni-list-item direction="column" v-for="(item,index) in matInfos" :key="index"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <uni-icons type="trash" size="22" style="position: absolute;right: 5%;" |
|---|
| | | @click="deleteList(index)"> |
|---|
| | | </uni-icons> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">éè´åå·ï¼{{item.purchaseOrderNo}}</view> |
|---|
| | | <view class="uni-note">ç©æç¼ç ï¼{{item.materielCode}}</view> |
|---|
| | | <view class="uni-note">æ¹æ¬¡å·ï¼{{item.lotNo}}</view> |
|---|
| | | <view class="uni-note">æ°éï¼{{item.quantity}}</view> |
|---|
| | | <view class="uni-note">ç产æ¥æï¼{{item.productionDate}}</view> |
|---|
| | | <view class="uni-note">æææï¼{{item.effectiveDate}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | </view> |
|---|
| | | </view> --> |
|---|
| | | <view v-if="current === 0" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="120"> |
|---|
| | | <uni-forms-item label="æçæ¡ç "> |
|---|
| | | <uni-easyinput type="text" :focus="!addressFocus" v-model="inboundBarcode" |
|---|
| | | placeholder="请æ«ææçæ¡ç " ref='midInput' @confirm="inputChangebarcode" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item label="å°åæ¡ç "> |
|---|
| | | <uni-easyinput type="text" v-model="address" :disabled="addressdisabled" |
|---|
| | | placeholder="请æ«æå°åæ¡ç " ref='midInput' :focus="addressFocus" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="inbound" type="primary" size="default" style="margin-top: 2%;">å
¥åºç¡®è®¤</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | </view> |
|---|
| | | <view> |
|---|
| | | <view class="uni-content" v-if="checkStockInfo" style="width: 500rpx; margin: 0px auto;"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2" style="font-size: 16px;">ç©æç¼å·ï¼{{checkStockInfo.materielCode}}</view> |
|---|
| | | <view class="uni-note" style="font-size: 16px;">æ£éªæ°éï¼{{checkStockInfo.receivedQuantity}}</view> |
|---|
| | | <view class="uni-note" style="font-size: 16px;">æ¥åºæ°éï¼{{checkStockInfo.scrappedQuantity}}</view> |
|---|
| | | <view class="uni-note" style="font-size: 16px;">ç¹éæ°éï¼{{checkStockInfo.defectedQuantity}}</view> |
|---|
| | | <view class="uni-note" style="font-size: 16px;">åæ ¼æ°éï¼{{checkStockInfo.qualifiedQuantity}}</view> |
|---|
| | | <view class="uni-note" style="font-size: 16px;">åºåæ°éï¼{{checkStockInfo.stockQuantity}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="current === 1" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="180"> |
|---|
| | | <uni-forms-item label="å
ç®±æ ç¾:"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«æå
ç®±æ ç¾" ref='midInput' :focus="pkfocus" |
|---|
| | | v-model="pkmaterSn" @input="pksnInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="pksubmit" type="primary" size="default" style="margin-top: 2%;">å
¥å¹³åº</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | <uni-list> |
|---|
| | | <uni-list-item direction="column" v-for="(item,index) in pkmatInfos" :key="index"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <uni-icons type="trash" size="22" style="position: absolute;right: 5%;" |
|---|
| | | @click="pkdeleteList(index)"> |
|---|
| | | </uni-icons> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">éè´åå·ï¼{{item.purchaseOrderNo}}</view> |
|---|
| | | <view class="uni-note">ç©æç¼ç ï¼{{item.materielCode}}</view> |
|---|
| | | <view class="uni-note">æ¹æ¬¡å·ï¼{{item.lotNo}}</view> |
|---|
| | | <view class="uni-note">æ°éï¼{{item.quantity}}</view> |
|---|
| | | <view class="uni-note">ç产æ¥æï¼{{item.productionDate}}</view> |
|---|
| | | <view class="uni-note">æææï¼{{item.effectiveDate}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <u-toast ref="uToast" /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const innerAudioContext = uni.createInnerAudioContext(); |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | items: ['å
¥åº'], //, 'åæ®ä¿¡æ¯', '解ç' |
|---|
| | | current: 0, |
|---|
| | | matTotal: [], |
|---|
| | | matInfos: [], |
|---|
| | | orderNo: "", |
|---|
| | | label: "", |
|---|
| | | orderInfo: [], |
|---|
| | | focus: false, |
|---|
| | | pkfocus: false, |
|---|
| | | barcode: "", |
|---|
| | | materSn: "", |
|---|
| | | Initiallife: 1000, |
|---|
| | | sns: [], |
|---|
| | | sn: "", |
|---|
| | | addressFocus: false, |
|---|
| | | inboundBarcode: "", |
|---|
| | | address: "", |
|---|
| | | check: true, |
|---|
| | | value: "", |
|---|
| | | matInfo: [], |
|---|
| | | value2: "", |
|---|
| | | matTotals: [], |
|---|
| | | warehouseId: "", |
|---|
| | | Test: false, |
|---|
| | | Testlabel: "", |
|---|
| | | Testplaceholder: "", |
|---|
| | | Testcheck: false, |
|---|
| | | Summmary: 0, |
|---|
| | | stockInfoDetail: [], |
|---|
| | | addressdisabled: false, |
|---|
| | | pksns: [], |
|---|
| | | pkmaterSn: "", |
|---|
| | | pkmatInfos: [], |
|---|
| | | checkStockInfo:null |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onShow() {}, |
|---|
| | | onLoad(res) { |
|---|
| | | this.focus = false; |
|---|
| | | this.addressFocus = false; |
|---|
| | | this.orderNo = res.orderNo; |
|---|
| | | this.warehouseId = res.warehouseId; |
|---|
| | | if (this.warehouseId == 6) { //æµè¯æ¶ä»åºåºID |
|---|
| | | this.Test = true; |
|---|
| | | this.Testlabel = "åå§å¯¿å½:"; |
|---|
| | | this.Testplaceholder = "请è¾å
¥åå§å¯¿å½"; |
|---|
| | | } else if (this.warehouseId == 2) { //油墨ä»åºåºID |
|---|
| | | this.Test = true; |
|---|
| | | this.Testlabel = "æ°é:"; |
|---|
| | | this.Testplaceholder = "请è¾å
¥æ°é"; |
|---|
| | | this.Initiallife = 16; |
|---|
| | | } else if (this.warehouseId == 5) { //è¾
æä»åºåºID |
|---|
| | | this.address = "8005"; |
|---|
| | | this.items.push("å
¥å¹³åº"); |
|---|
| | | this.items[1] = "å
¥ç«åº"; |
|---|
| | | this.address = "8005"; |
|---|
| | | } else if (this.warehouseId == 3) { //è¾
æä»åºåºID |
|---|
| | | this.address = "1011"; |
|---|
| | | this.addressdisabled = true; |
|---|
| | | } |
|---|
| | | this.label = "åæ®ç¼å·ï¼" + this.orderNo; |
|---|
| | | this.getData(); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // voiceSpeech(src) { |
|---|
| | | // innerAudioContext.src = src; // '../../static/success.mp3'; |
|---|
| | | // innerAudioContext.play(); |
|---|
| | | // }, |
|---|
| | | //wmså
¥å¹³åº |
|---|
| | | pksubmit() { |
|---|
| | | if (this.pkmatInfos.length == 0) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«æå
ç®±æ ç¾", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.$u.post('/api/InboundOrder/WMSInPinKu?warehouseId=' + this.warehouseId, this |
|---|
| | | .pksns).then(res => { |
|---|
| | | debugger |
|---|
| | | if (res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "å
¥åºæå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | this.focus = false; |
|---|
| | | this.pkmatInfos = []; |
|---|
| | | this.pksns = []; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | pksnInput() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | if (this.pkmaterSn != "") { |
|---|
| | | this.focus = false; |
|---|
| | | var matSn = this.pkmaterSn; |
|---|
| | | setTimeout(() => { |
|---|
| | | this.pkmaterSn = ""; |
|---|
| | | }, 10); |
|---|
| | | this.$u.post('/api/MaterielInfo/CodeAnalysis?serNum=' + matSn, {}).then((res) => { |
|---|
| | | if (res.status) { |
|---|
| | | this.pksns.push(res.data.serialNumber); |
|---|
| | | this.pkmatInfos.push(res.data); |
|---|
| | | if (!res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/fail.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/success.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | return; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/fail.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | //解ç |
|---|
| | | releasebox() { |
|---|
| | | if (this.value.length == 0) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«ç ", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var param; |
|---|
| | | var matInfo = this.value.split('|'); |
|---|
| | | if (matInfo.length == 7) { |
|---|
| | | param = { |
|---|
| | | MainData: { |
|---|
| | | "innerCode": this.value |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | param = { |
|---|
| | | MainData: { |
|---|
| | | "barcode": this.value |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.$u.post('/api/StockOperate/ReleaseAllBox', param).then(resdt => { |
|---|
| | | if (resdt.status) { |
|---|
| | | uni.$showMsg('解çæå!') |
|---|
| | | this.value = ""; |
|---|
| | | this.matInfo = []; |
|---|
| | | this.matTotals = []; |
|---|
| | | this.value2 = ""; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: resdt.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | releaseboxInput() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | if (this.value.length == 0) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var matInfo = this.value.split('|'); |
|---|
| | | this.matInfo = []; |
|---|
| | | if (matInfo.length == 7) { |
|---|
| | | this.$u.post('/api/StockOperate/GetStockInfoByInnerCode', { |
|---|
| | | MainData: { |
|---|
| | | "innerCode": this.value |
|---|
| | | } |
|---|
| | | }).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.matInfo = res.data.stockInfo; |
|---|
| | | this.matTotals = res.data.stockTotal; |
|---|
| | | this.value2 = res.data.barcode; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | this.$u.post('/api/StockOperate/GetStockInfoByBarcode', { |
|---|
| | | MainData: { |
|---|
| | | "barcode": this.value |
|---|
| | | } |
|---|
| | | }).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.matInfo = res.data.stockInfo; |
|---|
| | | this.matTotals = res.data.stockTotal; |
|---|
| | | this.value2 = res.data.barcode; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | updateFocus() { |
|---|
| | | debugger |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.materSn = ''; |
|---|
| | | if (!this.focus) { |
|---|
| | | this.focus = true; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | barcodeFocus() { |
|---|
| | | debugger |
|---|
| | | this.barcode = ''; |
|---|
| | | if (this.focus) { |
|---|
| | | this.focus = false; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | getData() { |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | orderNo: this.orderNo |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | this.$u.post('/api/InboundOrderDetail/GetInboundOrderDetails', postData).then((res) => { |
|---|
| | | if (res.status) { |
|---|
| | | this.orderInfo = res.data; |
|---|
| | | if (this.orderInfo.length > 3) { |
|---|
| | | this.loadVisible = true; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | onClickItem(e) { |
|---|
| | | this.focus = false; |
|---|
| | | this.addressFocus = false; |
|---|
| | | if (this.current !== e.currentIndex) { |
|---|
| | | this.current = e.currentIndex; |
|---|
| | | if (this.current == 2) { |
|---|
| | | this.getData(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | barcodeInput() { |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.barcode.length > 0) { |
|---|
| | | // if (this.barcode.substring(0, 1) == 'A' || this.barcode.substring(0, 2) == 'TP') { |
|---|
| | | this.focus = true; |
|---|
| | | // } else { |
|---|
| | | // this.$refs.uToast.show({ |
|---|
| | | // title: "æ«ç é误,请æ«ææçç ", |
|---|
| | | // type: "error" |
|---|
| | | // }) |
|---|
| | | // } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | snInput() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | if (this.warehouseId == 6 || this.warehouseId == 2 || this.warehouseId == 3) { |
|---|
| | | if (this.sns.length > 0) { |
|---|
| | | this.sns = []; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (this.materSn != "") { |
|---|
| | | this.focus = false; |
|---|
| | | if (this.warehouseId == 11) { |
|---|
| | | this.materSn = this.materSn.replace(/,SC.*/, ''); |
|---|
| | | } |
|---|
| | | if (this.materSn.split(',').length != 6) { |
|---|
| | | this.materSn = ""; |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var matSn = this.materSn; |
|---|
| | | //setTimeout(() => { |
|---|
| | | this.materSn = ""; |
|---|
| | | //}, 10); |
|---|
| | | this.$u.post('/api/MaterielInfo/CodeAnalysis?serNum=' + matSn, {}).then((res) => { |
|---|
| | | this.Testcheck = false; |
|---|
| | | if (res.status) { |
|---|
| | | this.sns.push(res.data.serialNumber); |
|---|
| | | if (this.warehouseId == 6 || this.warehouseId == 2 || this.warehouseId == |
|---|
| | | 3) { |
|---|
| | | if (this.matInfos.length > 0) { |
|---|
| | | this.matInfos = []; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.matInfos.push(res.data); |
|---|
| | | if (!res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/fail.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/success.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/fail.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | inbound() { |
|---|
| | | if (this.inboundBarcode == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«ææçæ¡ç ", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.address == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«æå°åæ¡ç ", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | "barcode": this.inboundBarcode, |
|---|
| | | "startPoint": this.address, |
|---|
| | | "warehouseId": this.warehouseId |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.$u.post('/api/Task/RequestInboundTask', postData).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.inboundBarcode = ""; |
|---|
| | | if (this.warehouseId != 5 && this.warehouseId != 3) this.address = ""; |
|---|
| | | this.checkStockInfo=null; |
|---|
| | | setTimeout(() => { |
|---|
| | | this.addressFocus = false; |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "æå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | }, 200); |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }).catch(err => { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: err.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | inputChangebarcode() { |
|---|
| | | this.addressFocus = false; |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.inboundBarcode != '') { |
|---|
| | | this.addressFocus = true; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.inboundBarcode != '') { |
|---|
| | | this.$u.post('/api/Task/InQualityConfirm?palletCode='+this.inboundBarcode, {}).then(res => { |
|---|
| | | // this.stockInfo = []; |
|---|
| | | this.checkStockInfo=null; |
|---|
| | | if (res.status) { |
|---|
| | | // this.stockInfo = res.data, |
|---|
| | | this.checkStockInfo = res.data; |
|---|
| | | } else { |
|---|
| | | this.inboundBarcode=''; |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | // title: "æªæ¾å°æçä¿¡æ¯", |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | deleteList(res) { |
|---|
| | | this.matInfos.splice(res, 1); |
|---|
| | | this.sns.splice(res, 1); |
|---|
| | | }, |
|---|
| | | submit() { |
|---|
| | | if (this.barcode == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«ææçæ¡ç ", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.matInfos.length == 0) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«æå
ç®±æ ç¾", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.Test) { |
|---|
| | | if (!this.Testcheck) { |
|---|
| | | this.Testcheck = true; |
|---|
| | | if (this.warehouseId == 2) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请确认æ°é", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | } else if (this.warehouseId == 6) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请确认åå§å¯¿å½", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (this.warehouseId == 2) { //油墨ä»åºåºID |
|---|
| | | this.sn = this.sns[0]; |
|---|
| | | for (var i = 0; i < this.Initiallife - 1; i++) { |
|---|
| | | this.sns.push(this.sn); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | let url = 'palletCode=' + this.barcode + '&initiallife=' + this.Initiallife + '&warehouseId=' + this |
|---|
| | | .warehouseId; |
|---|
| | | |
|---|
| | | this.$u.post('/api/InboundOrder/ManualMaterielGroup?' + url, this.sns).then(res => { |
|---|
| | | this.Testcheck = false; |
|---|
| | | if (res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "ç»çæå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | this.focus = false; |
|---|
| | | this.barcode = ""; |
|---|
| | | this.matInfos = []; |
|---|
| | | this.sns = []; |
|---|
| | | this.matTotal = []; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '@/common/uni-ui.scss'; |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | display: flex; |
|---|
| | | height: 150px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content-text { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .itemstyle { |
|---|
| | | margin-top: 30px; |
|---|
| | | margin-left: 5%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .headerstyle { |
|---|
| | | width: 90%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="180"> |
|---|
| | | <uni-forms-item label="æ°é:"> |
|---|
| | | <uni-easyinput type="text" placeholder="请è¾å
¥æ°é" ref='midInput' :focus="!focus" v-model="qty" |
|---|
| | | @input="barcodeInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item label="æçæ¡ç :"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«ææçæ¡ç " ref='midInput' :focus="focus" v-model="barcode" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="OutEmpty" type="primary" size="default" style="margin-top: 2%;">空箱åºåº</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | </view> |
|---|
| | | <u-toast ref="uToast" /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const innerAudioContext = uni.createInnerAudioContext(); |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | focus: false, |
|---|
| | | qty: "", |
|---|
| | | address: "", |
|---|
| | | barcode: "", |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onShow() {}, |
|---|
| | | onLoad(res) { |
|---|
| | | this.WarehouseId = res.warehouseId; |
|---|
| | | this.focus = false; |
|---|
| | | this.qty = 1; |
|---|
| | | if (res.warehouseId == 5) { |
|---|
| | | this.address = "8001"; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // voiceSpeech(src) { |
|---|
| | | // innerAudioContext.src = src; // '../../static/success.mp3'; |
|---|
| | | // innerAudioContext.play(); |
|---|
| | | // }, |
|---|
| | | barcodeInput() { |
|---|
| | | // this.$nextTick(function(x) { |
|---|
| | | // if (this.barcode.length > 0) { |
|---|
| | | // this.focus = true; |
|---|
| | | // } |
|---|
| | | // }) |
|---|
| | | }, |
|---|
| | | OutEmpty() { |
|---|
| | | if (this.qty == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请è¾å
¥æ°é", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.qty < 1) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "æ°éä¸è½å°äº1", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.$u.post('/api/Task/OutEmpty?qty=' + this.qty + '&address=' + this.address + '&WarehouseId=' + |
|---|
| | | this.WarehouseId + '&barcode=' + this.barcode).then( |
|---|
| | | res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "æå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | this.qty = ""; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '@/common/uni-ui.scss'; |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | display: flex; |
|---|
| | | height: 150px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content-text { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .itemstyle { |
|---|
| | | margin-top: 30px; |
|---|
| | | margin-left: 5%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .headerstyle { |
|---|
| | | width: 90%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="180"> |
|---|
| | | <uni-forms-item label="å¤ç®±ç :"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«æå¤ç®±ç " ref='midInput' v-model="barcode" :focus="!focus" |
|---|
| | | class="search_box" :disabled="isDisable" @confirm="handleKeyPress"/> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | </view> |
|---|
| | | <view style="padding: 0 0rpx 0rpx;"> |
|---|
| | | <!-- å½ååºåºå¤å
å· --> |
|---|
| | | <view class="item_boxItem"> |
|---|
| | | <uni-list> |
|---|
| | | <uni-list-item direction="column" v-for="(item,index) in listShow" :key="index"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <uni-icons type="trash" size="22" style="position: absolute;right: 5%;" |
|---|
| | | @click="deleteList(index)"> |
|---|
| | | </uni-icons> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">å¤å
ï¼{{item.code}} æ°éï¼{{item.qty}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view style="padding: 0 14rpx 200rpx;"> |
|---|
| | | <!-- æç» --> |
|---|
| | | <view v-for="i in list" :key="i.id" class="item_box"> |
|---|
| | | <view style="line-height: 17px;color: #596671;font-size: 14px;text-align: left;font-weight: bold;">订åæç»è¡å·ï¼{{i.rowId}} |
|---|
| | | </view> |
|---|
| | | <view style="margin-top: 22rpx;height: 140rpx;display: flex;flex-direction: column;justify-content: space-around;"> |
|---|
| | | <view style="color: #00070F;font-size: 12px;">客æ·ä»£å·ï¼{{i.customer}}</view> |
|---|
| | | <view style="color: #00070F;font-size: 12px;">产åç¼å·ï¼{{i.pCode}}</view> |
|---|
| | | <view style="color: #00070F;font-size: 12px;">éå®è®¢åï¼{{i.saleOrder}}</view> |
|---|
| | | <view style="color: #f56c6c;font-size: 12px;">订åæ°éï¼{{i.qtyPcs}}</view> |
|---|
| | | <view style="color: #67c23a;font-size: 12px;">å·²åºæ°éï¼{{i.overQtyPcs}}</view> |
|---|
| | | </view> |
|---|
| | | <view style="width: 100%;height: 1rpx;background-color: #00070F;margin-top: 28rpx;"> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view style="padding:20rpx;position: fixed;bottom: 0;left: 0;background-color:lightgray;width: 100%;z-index: 999;display: flex;justify-content: space-between;"> |
|---|
| | | <view style="margin-bottom: 22rpx;padding-left: 16rpx;line-height: 80rpx;"> |
|---|
| | | <view style="font-size: 24rpx;font-weight: bold;color: #f56c6c;">订åæ»æ°éï¼<text>{{orderQty}}</text></view> |
|---|
| | | <view style="font-size: 24rpx;font-weight: bold;color: #67c23a;">å·²æ«æ»æ°éï¼<text>{{total}}</text></view> |
|---|
| | | </view> |
|---|
| | | <view style="display: flex;height: 110rpx;margin-top: 40rpx;"> |
|---|
| | | <button @click="reset" type="default" size="default" style="margin-top: 2%;width: 160rpx;border: 1rpx solid #007aff;color: #007aff;margin-right: 30rpx;">éç½®</button> |
|---|
| | | <button @click="InEmpty" type="primary" size="default" style="margin-top: 2%;width: 160rpx;">åºè´§</button> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <u-toast ref="uToast" /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const innerAudioContext = uni.createInnerAudioContext(); |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | focus: false, |
|---|
| | | barcode: "", |
|---|
| | | proOutNo: "", |
|---|
| | | id: null, |
|---|
| | | list:[], |
|---|
| | | listOutBags:[], |
|---|
| | | listShow:[], |
|---|
| | | total:0, |
|---|
| | | orderQty:0, |
|---|
| | | isDisable:false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onShow() {}, |
|---|
| | | onLoad(res) { |
|---|
| | | this.proOutNo=res.proOutNo; |
|---|
| | | this.GetDetail(res.id); |
|---|
| | | this.id=res.id; |
|---|
| | | uni.hideKeyboard(); //éè软é®ç |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | handleKeyPress(e) { |
|---|
| | | console.log(e); |
|---|
| | | // å车符ï¼ASCII 13ï¼è¡¨ç¤ºæ«ç ç»æ |
|---|
| | | this.isDisable=true; |
|---|
| | | this.focus=true; |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | var values= this.barcode.split(','); |
|---|
| | | if(values.length==5){ |
|---|
| | | // if (values.length != 5) { |
|---|
| | | // this.$refs.uToast.show({ |
|---|
| | | // title: "æ«ææ ¼å¼é误"+value, |
|---|
| | | // type: 'error' |
|---|
| | | // }) |
|---|
| | | // this.barcode=""; |
|---|
| | | // this.$refs.midInput.focus(); |
|---|
| | | // return; |
|---|
| | | // } |
|---|
| | | this.$u.post('/api/ProOutOrder/CheckCode?code='+this.barcode,{}).then( |
|---|
| | | res => { |
|---|
| | | if (res.status) { |
|---|
| | | //å¤ææ¯å¦éå¤ |
|---|
| | | if (this.listShow.some(item => item.code === values[0])) { |
|---|
| | | this.barcode=""; |
|---|
| | | setTimeout(() => { |
|---|
| | | this.isDisable=false; |
|---|
| | | this.focus=false; |
|---|
| | | },200); |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "éå¤æ«æ"+values[0]+"å·²åå¨", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.list.some(item => item.pCode === values[1])) { |
|---|
| | | var outCode=values[0]; |
|---|
| | | var outQty=parseInt(values[4]); |
|---|
| | | //å¤æoutQty为æ°å |
|---|
| | | if (isNaN(outQty)) { |
|---|
| | | this.barcode=""; |
|---|
| | | setTimeout(() => { |
|---|
| | | this.isDisable=false; |
|---|
| | | this.focus=false; |
|---|
| | | },200); |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "æ«ææ ¼å¼é误"+values[4], |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | //å¤æoutQtyæ¯å¦å¤§äº0 |
|---|
| | | if (outQty<=0) { |
|---|
| | | this.barcode=""; |
|---|
| | | setTimeout(() => { |
|---|
| | | this.isDisable=false; |
|---|
| | | this.focus=false; |
|---|
| | | },200); |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "æ ç¾æ°å¿
须大äº0", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.total+=outQty; |
|---|
| | | if(this.orderQty<this.total){ |
|---|
| | | this.barcode=""; |
|---|
| | | setTimeout(() => { |
|---|
| | | this.isDisable=false; |
|---|
| | | this.focus=false; |
|---|
| | | },200); |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "订åæ°è¶
åº", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.listShow.unshift({code:outCode,qty:outQty}); |
|---|
| | | console.log(this.listShow); |
|---|
| | | //å»é¤this.barcodeçç©ºæ ¼ |
|---|
| | | this.listOutBags.push(this.barcode.replace(/\s*/g, "")); |
|---|
| | | this.barcode=""; |
|---|
| | | setTimeout(() => { |
|---|
| | | this.isDisable=false; |
|---|
| | | this.focus=false; |
|---|
| | | },200); |
|---|
| | | |
|---|
| | | }else{ |
|---|
| | | this.barcode=""; |
|---|
| | | setTimeout(() => { |
|---|
| | | this.isDisable=false; |
|---|
| | | this.focus=false; |
|---|
| | | },200); |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "æ«æ"+values[1]+"æ¹å·ä¸å¨è®¢åä¸", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | GetDetail(value) { |
|---|
| | | this.$u.post('/api/ProOutOrder/GetOrderDetails?keyId='+value).then( |
|---|
| | | res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.list=res.data.proOutOrderDetails; |
|---|
| | | this.orderQty=this.list.map(x=>{ |
|---|
| | | return x.qtyPcs |
|---|
| | | }).reduce((a,b)=>{ |
|---|
| | | return a+b |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // voiceSpeech(src) { |
|---|
| | | // innerAudioContext.src = src; // '../../static/success.mp3'; |
|---|
| | | // innerAudioContext.play(); |
|---|
| | | // }, |
|---|
| | | // barcodeInput(value) { |
|---|
| | | // this.isDisable=true; |
|---|
| | | // this.focus=true; |
|---|
| | | // setTimeout(x=>{ |
|---|
| | | // this.$nextTick(function(x) { |
|---|
| | | // var values= this.barcode.split(','); |
|---|
| | | // if(values.length==5){ |
|---|
| | | // // if (values.length != 5) { |
|---|
| | | // // this.$refs.uToast.show({ |
|---|
| | | // // title: "æ«ææ ¼å¼é误"+value, |
|---|
| | | // // type: 'error' |
|---|
| | | // // }) |
|---|
| | | // // this.barcode=""; |
|---|
| | | // // this.$refs.midInput.focus(); |
|---|
| | | // // return; |
|---|
| | | // // } |
|---|
| | | // this.$u.post('/api/ProOutOrder/CheckCode?code='+this.barcode,{}).then( |
|---|
| | | // res => { |
|---|
| | | // if (res.status) { |
|---|
| | | // //å¤ææ¯å¦éå¤ |
|---|
| | | // if (this.listShow.some(item => item.code === values[0])) { |
|---|
| | | // this.barcode=""; |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.isDisable=false; |
|---|
| | | // this.focus=false; |
|---|
| | | // },200); |
|---|
| | | // this.$refs.uToast.show({ |
|---|
| | | // title: "éå¤æ«æ"+values[0]+"å·²åå¨", |
|---|
| | | // type: 'error' |
|---|
| | | // }) |
|---|
| | | // return; |
|---|
| | | // } |
|---|
| | | // if (this.list.some(item => item.pCode === values[1])) { |
|---|
| | | // var outCode=values[0]; |
|---|
| | | // var outQty=parseInt(values[4]); |
|---|
| | | // //å¤æoutQty为æ°å |
|---|
| | | // if (isNaN(outQty)) { |
|---|
| | | // this.barcode=""; |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.isDisable=false; |
|---|
| | | // this.focus=false; |
|---|
| | | // },200); |
|---|
| | | // this.$refs.uToast.show({ |
|---|
| | | // title: "æ«ææ ¼å¼é误"+values[4], |
|---|
| | | // type: 'error' |
|---|
| | | // }) |
|---|
| | | // return; |
|---|
| | | // } |
|---|
| | | // //å¤æoutQtyæ¯å¦å¤§äº0 |
|---|
| | | // if (outQty<=0) { |
|---|
| | | // this.barcode=""; |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.isDisable=false; |
|---|
| | | // this.focus=false; |
|---|
| | | // },200); |
|---|
| | | // this.$refs.uToast.show({ |
|---|
| | | // title: "æ ç¾æ°å¿
须大äº0", |
|---|
| | | // type: 'error' |
|---|
| | | // }) |
|---|
| | | // return; |
|---|
| | | // } |
|---|
| | | // this.total+=outQty; |
|---|
| | | // if(this.orderQty<this.total){ |
|---|
| | | // this.barcode=""; |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.isDisable=false; |
|---|
| | | // this.focus=false; |
|---|
| | | // },200); |
|---|
| | | // this.$refs.uToast.show({ |
|---|
| | | // title: "订åæ°è¶
åº", |
|---|
| | | // type: 'error' |
|---|
| | | // }) |
|---|
| | | // return; |
|---|
| | | // } |
|---|
| | | // this.listShow.unshift({code:outCode,qty:outQty}); |
|---|
| | | // console.log(this.listShow); |
|---|
| | | // //å»é¤this.barcodeçç©ºæ ¼ |
|---|
| | | // this.listOutBags.push(this.barcode.replace(/\s*/g, "")); |
|---|
| | | // this.barcode=""; |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.isDisable=false; |
|---|
| | | // this.focus=false; |
|---|
| | | // },200); |
|---|
| | | |
|---|
| | | // }else{ |
|---|
| | | // this.barcode=""; |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.isDisable=false; |
|---|
| | | // this.focus=false; |
|---|
| | | // },200); |
|---|
| | | // this.$refs.uToast.show({ |
|---|
| | | // title: "æ«æ"+values[1]+"æ¹å·ä¸å¨è®¢åä¸", |
|---|
| | | // type: 'error' |
|---|
| | | // }) |
|---|
| | | // return; |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // }) |
|---|
| | | // } |
|---|
| | | // }) |
|---|
| | | // },200) |
|---|
| | | // }, |
|---|
| | | deleteList(res) { |
|---|
| | | let indexExist =-1; |
|---|
| | | //æ¥è¯¢this.listOutBagsä¸æ¯å¦æthis.listShow[res].code |
|---|
| | | this.listOutBags.forEach((item,index) => { |
|---|
| | | //itemæ¯å¦å
å« this.listShow[res].code |
|---|
| | | if (item.includes(this.listShow[res].code)) { |
|---|
| | | indexExist=index; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | console.log(indexExist); |
|---|
| | | if (indexExist !=-1) { // å¦ææ¾å°äºç´¢å¼ï¼åæ§è¡å é¤æä½ |
|---|
| | | this.total-=this.listShow[res].qty; |
|---|
| | | this.listOutBags.splice(indexExist, 1); // ä»ç´¢å¼ä½ç½®å¼å§å é¤ä¸ä¸ªå
ç´ |
|---|
| | | this.listShow.splice(res, 1); |
|---|
| | | } |
|---|
| | | setTimeout(() => { |
|---|
| | | this.isDisable=false; |
|---|
| | | },200); |
|---|
| | | this.barcode=""; |
|---|
| | | }, |
|---|
| | | reset(){ |
|---|
| | | this.listShow=[]; |
|---|
| | | this.total=0; |
|---|
| | | this.listOutBags=[]; |
|---|
| | | this.focus=true; |
|---|
| | | this.barcode=""; |
|---|
| | | setTimeout(() => { |
|---|
| | | this.barcode=""; |
|---|
| | | this.isDisable=false; |
|---|
| | | this.focus=false; |
|---|
| | | }, 200); |
|---|
| | | }, |
|---|
| | | InEmpty() { |
|---|
| | | // if (this.barcode == "") { |
|---|
| | | // this.$refs.uToast.show({ |
|---|
| | | // title: "请æ«æå¤ç®±ç ", |
|---|
| | | // type: 'error' |
|---|
| | | // }) |
|---|
| | | // return; |
|---|
| | | // } |
|---|
| | | if(this.orderQty!==this.total){ |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«æ"+this.orderQty+"æ°é", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | "outProOrderNo":this.proOutNo |
|---|
| | | }, |
|---|
| | | DelKeys:this.listOutBags |
|---|
| | | } |
|---|
| | | this.$u.post('/api/ProOutOrder/OutProScanCodeSync',postData).then( |
|---|
| | | res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "æå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | this.reset(); |
|---|
| | | this.GetDetail(this.id); |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '@/common/uni-ui.scss'; |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | display: flex; |
|---|
| | | height: 150px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content-text { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .itemstyle { |
|---|
| | | margin-top: 30px; |
|---|
| | | margin-left: 5%; |
|---|
| | | } |
|---|
| | | .item_box { |
|---|
| | | background-color: white; |
|---|
| | | // height: 344rpx; |
|---|
| | | border-radius: 12rpx; |
|---|
| | | padding: 40rpx 38rpx 28rpx 34rpx; |
|---|
| | | font-size: 24rpx; |
|---|
| | | line-height: 34rpx; |
|---|
| | | margin-top: 20rpx; |
|---|
| | | } |
|---|
| | | .item_boxItem { |
|---|
| | | background-color: white; |
|---|
| | | padding: 40rpx 38rpx 28rpx 34rpx; |
|---|
| | | // height: 344rpx; |
|---|
| | | border-radius: 12rpx; |
|---|
| | | font-size: 24rpx; |
|---|
| | | line-height: 17rpx; |
|---|
| | | } |
|---|
| | | .headerstyle { |
|---|
| | | width: 90%; |
|---|
| | | } |
|---|
| | | .search_box { |
|---|
| | | padding: 10rpx 20rpx 20rpx; |
|---|
| | | background-color: white; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="180"> |
|---|
| | | <uni-forms-item label="æçæ¡ç :"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«ææçæ¡ç " ref='midInput' :focus="!focus" v-model="barcode" |
|---|
| | | @input="barcodeInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item label="èµ·ç¹ä½ç½®:"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«æèµ·ç¹ä½ç½®" ref='midInput' :focus="focusStart" v-model="address" |
|---|
| | | @input="addressInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="InEmpty" type="primary" size="default" style="margin-top: 2%;">ä½æååº</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | </view> |
|---|
| | | <u-toast ref="uToast" /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const innerAudioContext = uni.createInnerAudioContext(); |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | focus: false, |
|---|
| | | focusStart:false, |
|---|
| | | barcode: "", |
|---|
| | | address: "", |
|---|
| | | WarehouseId: "" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onShow() {}, |
|---|
| | | onLoad(res) { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // voiceSpeech(src) { |
|---|
| | | // innerAudioContext.src = src; // '../../static/success.mp3'; |
|---|
| | | // innerAudioContext.play(); |
|---|
| | | // }, |
|---|
| | | barcodeInput() { |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.barcode.length > 0) { |
|---|
| | | this.focus = true; |
|---|
| | | this.focusStart=true; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | addressInput() { |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.address.length > 0) { |
|---|
| | | this.focusStart = false; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | InEmpty() { |
|---|
| | | if (this.barcode == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«ææçç ", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.address == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«æèµ·ç¹", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.$u.post('/api/Task/BackProductTask?barcode=' + this.barcode + '&startPoint=' + this.address).then( |
|---|
| | | res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "æå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | this.barcode = ""; |
|---|
| | | this.address = ""; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '@/common/uni-ui.scss'; |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | display: flex; |
|---|
| | | height: 150px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content-text { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .itemstyle { |
|---|
| | | margin-top: 30px; |
|---|
| | | margin-left: 5%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .headerstyle { |
|---|
| | | width: 90%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="180"> |
|---|
| | | <uni-forms-item label="æçæ¡ç :"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«ææçæ¡ç " ref='midInput' :focus="!focus" v-model="barcode" |
|---|
| | | @input="barcodeInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item label="èµ·ç¹ä½ç½®:"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«æèµ·ç¹ä½ç½®" ref='midInput' :focus="focusStart" v-model="address" |
|---|
| | | @input="addressInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="InEmpty" type="primary" size="default" style="margin-top: 2%;">空æ¡ååº</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | </view> |
|---|
| | | <u-toast ref="uToast" /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const innerAudioContext = uni.createInnerAudioContext(); |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | focus: false, |
|---|
| | | focusStart:false, |
|---|
| | | barcode: "", |
|---|
| | | address: "", |
|---|
| | | WarehouseId: "" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onShow() {}, |
|---|
| | | onLoad(res) { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // voiceSpeech(src) { |
|---|
| | | // innerAudioContext.src = src; // '../../static/success.mp3'; |
|---|
| | | // innerAudioContext.play(); |
|---|
| | | // }, |
|---|
| | | barcodeInput() { |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.barcode.length > 0) { |
|---|
| | | this.focus = true; |
|---|
| | | this.focusStart=true; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | addressInput() { |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.address.length > 0) { |
|---|
| | | this.focusStart = false; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | InEmpty() { |
|---|
| | | if (this.barcode == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«ææçç ", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.address == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«æèµ·ç¹", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.$u.post('/api/Task/EmptyBackTask?barcode=' + this.barcode + '&startPoint=' + this.address).then( |
|---|
| | | res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "æå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | this.barcode = ""; |
|---|
| | | this.address = ""; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '@/common/uni-ui.scss'; |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | display: flex; |
|---|
| | | height: 150px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content-text { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .itemstyle { |
|---|
| | | margin-top: 30px; |
|---|
| | | margin-left: 5%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .headerstyle { |
|---|
| | | width: 90%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <u-sticky> |
|---|
| | | <view style="background-color: #ffffff;"> |
|---|
| | | <uni-search-bar @confirm="search" v-model="searchValue"></uni-search-bar> |
|---|
| | | </view> |
|---|
| | | </u-sticky> |
|---|
| | | <uni-list :border="true"> |
|---|
| | | <uni-list-item direction="column" clickable @click="groupClick(item.proOutOrderNo)" link |
|---|
| | | :to="page+item.proOutOrderNo+'&warehouseId='+warehouseId+'&id='+item.id" v-for="item in allReceivingOrders" |
|---|
| | | :key="item.proOutOrderNo"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <uni-group margin-top="20"> |
|---|
| | | <view style="line-height: 17px;color: #596671;font-size: 14px;text-align: center;display: flex;justify-content: space-between;"> |
|---|
| | | åºè´§åå· {{item.proOutOrderNo}} |
|---|
| | | </view> |
|---|
| | | <view style="line-height: 17px;color: #596671;font-size: 14px;text-align: center;display: flex;justify-content: space-between;"> |
|---|
| | | å建æ¶é´ {{item.createDate}} |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | style="margin-top: 10rpx;display: flex;align-items: center; "> |
|---|
| | | <view style="text-align: center;line-height: 40rpx;border-radius: 8rpx; width: 238rpx;height: 40rpx;font-size: 22rpx;background-color:rgba(22,127,247,0.18);color: #1F63FF;"> |
|---|
| | | 订åç¶æ {{item.ProOutStatus}} |
|---|
| | | </view> |
|---|
| | | <view style="text-align: center;line-height: 40rpx;border-radius: 8rpx; width: 158rpx;height: 40rpx;font-size: 22rpx;color: #F56C6C;"> |
|---|
| | | æ»æ°é {{item.SumQty}} |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </uni-group> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | |
|---|
| | | </uni-list> |
|---|
| | | <uni-load-more :status="status" v-if="loadVisible"></uni-load-more> |
|---|
| | | |
|---|
| | | <u-back-top :scroll-top="scrollTop" top="400"></u-back-top> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { ProOutStatus } from '../../common/config.js' |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | page: "/pages/stash/OutProOrder?proOutNo=", |
|---|
| | | loadVisible: false, |
|---|
| | | searchValue: "", |
|---|
| | | warehouseId: "", |
|---|
| | | status: "more", |
|---|
| | | allReceivingOrders: [], |
|---|
| | | pageNo: 1, |
|---|
| | | scrollTop: 0, |
|---|
| | | isLoaded:false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onLoad(res) { |
|---|
| | | this.warehouseId = res.warehouseId; |
|---|
| | | this.isLoaded = true; |
|---|
| | | this.getData(); |
|---|
| | | }, |
|---|
| | | onPageScroll(e) { |
|---|
| | | this.scrollTop = e.scrollTop; |
|---|
| | | }, |
|---|
| | | onShow() { |
|---|
| | | if (this.isLoaded) { |
|---|
| | | // ä»å
¶ä»é¡µé¢è¿åæ¶å·æ° |
|---|
| | | this.getData(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onReachBottom() { |
|---|
| | | this.pageNo += 1; |
|---|
| | | this.getData(); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | search(res) { |
|---|
| | | this.pageNo = 1; |
|---|
| | | this.getData(); |
|---|
| | | }, |
|---|
| | | groupClick() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | getData() { |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | orderNo: this.searchValue, |
|---|
| | | pageNo: this.pageNo, |
|---|
| | | warehouseId: this.warehouseId, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | this.$u.post('/api/ProOutOrder/GetProOutOrders', postData).then((res) => { |
|---|
| | | if (res.status) { |
|---|
| | | if (res.data.length > 0) { |
|---|
| | | if (this.searchValue == '') { |
|---|
| | | this.allReceivingOrders =res.data.map(i => ({ |
|---|
| | | ...i, |
|---|
| | | ProOutStatus: ProOutStatus.find(item => item.value == i |
|---|
| | | .proOrderStatus).label, |
|---|
| | | SumQty: i.details.map(item => item.qtyPcs).reduce((prev, next) => prev + next, 0) |
|---|
| | | })) |
|---|
| | | // this.allReceivingOrders = res.data; |
|---|
| | | if (this.allReceivingOrders.length > 3) { |
|---|
| | | this.loadVisible = true; |
|---|
| | | } else { |
|---|
| | | this.loadVisible = false; |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | // this.allReceivingOrders = res.data; |
|---|
| | | if (postData.MainData.pageNo == 1) { |
|---|
| | | this.allReceivingOrders = []; |
|---|
| | | } |
|---|
| | | this.allReceivingOrders =res.data.map(i => ({ |
|---|
| | | ...i, |
|---|
| | | ProOutStatus: ProOutStatus.find(item => item.value == i |
|---|
| | | .proOrderStatus).label, |
|---|
| | | SumQty: i.details.map(item => item.qtyPcs).reduce((prev, next) => prev + next, 0) |
|---|
| | | })) |
|---|
| | | if (this.allReceivingOrders.length > 3) { |
|---|
| | | this.loadVisible = true; |
|---|
| | | } else { |
|---|
| | | this.loadVisible = false; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.status = 'noMore'; |
|---|
| | | //this.allReceivingOrders = []; |
|---|
| | | this.loadVisible = true; |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '@/common/uni-ui.scss'; |
|---|
| | | |
|---|
| | | page { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | box-sizing: border-box; |
|---|
| | | background-color: #efeff4; |
|---|
| | | min-height: 100%; |
|---|
| | | height: auto; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tips { |
|---|
| | | color: #67c23a; |
|---|
| | | font-size: 14px; |
|---|
| | | line-height: 40px; |
|---|
| | | text-align: center; |
|---|
| | | background-color: #f0f9eb; |
|---|
| | | height: 0; |
|---|
| | | opacity: 0; |
|---|
| | | transform: translateY(-100%); |
|---|
| | | transition: all 0.3s; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tips-ani { |
|---|
| | | transform: translateY(0); |
|---|
| | | height: 40px; |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | width: 100%; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .list-picture { |
|---|
| | | width: 100%; |
|---|
| | | height: 145px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .thumb-image { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .ellipsis { |
|---|
| | | display: flex; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-ellipsis-1 { |
|---|
| | | overflow: hidden; |
|---|
| | | white-space: nowrap; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-ellipsis-2 { |
|---|
| | | overflow: hidden; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | display: -webkit-box; |
|---|
| | | -webkit-line-clamp: 2; |
|---|
| | | -webkit-box-orient: vertical; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .customcss { |
|---|
| | | display: flex; |
|---|
| | | position: fixed; |
|---|
| | | width: 100%; |
|---|
| | | top: 10px; |
|---|
| | | text-align: center; |
|---|
| | | z-index: 999; |
|---|
| | | left: 30px; |
|---|
| | | height: 20%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .footer { |
|---|
| | | padding-top: 50%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <!-- <uni-forms ref="formData" :modelValue="formData" label-width="120"> --> |
|---|
| | | <uni-forms class="customcss" label-width="120"> |
|---|
| | | <uni-forms-item label="æçæ¡ç "> |
|---|
| | | <uni-easyinput type="text" :focus="!barcodefocus" v-model="barcode" placeholder="请æ«ææçæ¡ç " ref='midInput' |
|---|
| | | @input="locationNoinputChange()" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | <uni-list> |
|---|
| | | <uni-list-item direction="column" v-if="stockInfoBarcode"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">æçå·ï¼{{stockInfoBarcode}}</view> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">æ»æ°éï¼{{Summmary}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | <uni-list-item direction="column" v-for="(item,index) in stockInfoDetail" :key="index"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">ç©æç¼å·ï¼{{item.materielCode}}</view> |
|---|
| | | <view class="uni-note">ç©æå称ï¼{{item.materielName}}</view> |
|---|
| | | <view class="uni-note">ç©ææ¹æ¬¡ï¼{{item.batchNo}}</view> |
|---|
| | | <view class="uni-note">åºåæ°éï¼{{item.stockQuantity}}</view> |
|---|
| | | <view class="uni-note">åºåºæ°éï¼{{item.outboundQuantity}}</view> |
|---|
| | | <view class="uni-note">ç产æ¥æï¼{{item.productionDate}}</view> |
|---|
| | | <view class="uni-note">æ æ æï¼{{item.effectiveDate}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | |
|---|
| | | <u-toast ref="uToast" /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // stockInfo: [], |
|---|
| | | stockInfoDetail: [], |
|---|
| | | barcode: '', |
|---|
| | | Summmary: 0, |
|---|
| | | barcodefocus: false, |
|---|
| | | warehouseId: 0, |
|---|
| | | stockInfoBarcode: '', |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onLoad(res) { |
|---|
| | | this.warehouseId = res.warehouseId; |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | locationNoinputChange() { |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.barcode != '') { |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | "barcode": this.barcode, |
|---|
| | | "warehouseId": this.warehouseId, |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | this.$u.post('/api/StockInfo/StockQueryData', postData).then(res => { |
|---|
| | | this.stockInfoBarcode = ""; |
|---|
| | | // this.stockInfo = []; |
|---|
| | | this.stockInfoDetail = []; |
|---|
| | | if (res.status) { |
|---|
| | | this.stockInfoBarcode = res.data.palletCode, |
|---|
| | | // this.stockInfo = res.data, |
|---|
| | | this.stockInfoDetail = res.data.details |
|---|
| | | //è·åæ»æ°é |
|---|
| | | this.stockInfoDetail.forEach(item => { |
|---|
| | | this.Summmary+= item.stockQuantity; |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | // title: "æªæ¾å°æçä¿¡æ¯", |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | this.barcode = ""; |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '@/common/uni-ui.scss'; |
|---|
| | | |
|---|
| | | page { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | box-sizing: border-box; |
|---|
| | | background-color: #efeff4; |
|---|
| | | min-height: 100%; |
|---|
| | | height: auto; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tips { |
|---|
| | | color: #67c23a; |
|---|
| | | font-size: 14px; |
|---|
| | | line-height: 40px; |
|---|
| | | text-align: center; |
|---|
| | | background-color: #f0f9eb; |
|---|
| | | height: 0; |
|---|
| | | opacity: 0; |
|---|
| | | transform: translateY(-100%); |
|---|
| | | transition: all 0.3s; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tips-ani { |
|---|
| | | transform: translateY(0); |
|---|
| | | height: 40px; |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | width: 100%; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .list-picture { |
|---|
| | | width: 100%; |
|---|
| | | height: 145px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .thumb-image { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .ellipsis { |
|---|
| | | display: flex; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-ellipsis-1 { |
|---|
| | | overflow: hidden; |
|---|
| | | white-space: nowrap; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-ellipsis-2 { |
|---|
| | | overflow: hidden; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | display: -webkit-box; |
|---|
| | | -webkit-line-clamp: 2; |
|---|
| | | -webkit-box-orient: vertical; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .customcss { |
|---|
| | | background-color: #fff; |
|---|
| | | padding: 20rpx 40rpx; |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .footer { |
|---|
| | | // padding-top: 20%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"> |
|---|
| | | </uni-segmented-control> |
|---|
| | | <view class="content"> |
|---|
| | | <view v-if="current === 0" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="120"> |
|---|
| | | <uni-forms-item label="æçæ¡ç "> |
|---|
| | | <uni-easyinput type="text" :focus="!istrue" v-model="barcode" placeholder="请æ«ææçæ¡ç " |
|---|
| | | ref='midInput' @confirm="inputChangebarcode()" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item label="å®çæ°é"> |
|---|
| | | <uni-easyinput type="number" v-model="num" placeholder="请è¾å
¥å®çæ°é" ref='midInput' /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="picking" type="primary" style="margin-left: 0px;">çç¹å®æ</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | <view class="uni-content" v-if="takeStockObj"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">çç¹åå·ï¼{{orderNo}}</view> |
|---|
| | | <view class="uni-note">ç©æç¼ç ï¼{{takeStockObj.materielCode}}</view> |
|---|
| | | <view class="uni-note">ç©ææ¹æ¬¡ï¼{{takeStockObj.batchNo}}</view> |
|---|
| | | <view class="uni-note">ç©æå称ï¼{{takeStockObj.materielName}}</view> |
|---|
| | | <view class="uni-note">ç©æè§æ ¼ï¼{{takeStockObj.materielSpec}}</view> |
|---|
| | | <view class="uni-note">è´¦é¢æ°éï¼{{takeStockObj.sysQty}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="current === 1" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="120"> |
|---|
| | | <uni-forms-item label="æçæ¡ç "> |
|---|
| | | <uni-easyinput type="text" :focus="!addressFocus" v-model="inboundBarcode" |
|---|
| | | placeholder="请æ«ææçæ¡ç " ref='midInput' @confirm="inputChangebarcode3" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item label="å°åæ¡ç "> |
|---|
| | | <uni-easyinput type="text" v-model="address" :disabled="addressdisabled" placeholder="请æ«æå°åæ¡ç " ref='midInput' |
|---|
| | | :focus="addressFocus" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="inbound" type="primary" size="default" style="margin-top: 2%;">å
¥åºç¡®è®¤</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | </view> |
|---|
| | | <view> |
|---|
| | | <uni-list> |
|---|
| | | <uni-list-item direction="column" v-if="inboundBarcode"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">ç»çæ»æ°éï¼{{Summmary}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | <uni-list-item direction="column" v-for="(item,index) in stockInfoDetail" :key="index"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">ç©æç¼å·ï¼{{item.materielCode}}</view> |
|---|
| | | <view class="uni-note">ç©æå称ï¼{{item.materielName}}</view> |
|---|
| | | <view class="uni-note">ç©ææ¹æ¬¡ï¼{{item.batchNo}}</view> |
|---|
| | | <view class="uni-note">ç»çæ°éï¼{{item.stockQuantity}}</view> |
|---|
| | | <view class="uni-note">ç产æ¥æï¼{{item.productionDate}}</view> |
|---|
| | | <view class="uni-note">æ æ æï¼{{item.effectiveDate}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <u-toast ref="uToast" /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | // const SixUniTts = uni.requireNativePlugin("SmallSix-SixUniTts") |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | items: ['çç¹', 'å
¥åº'],//'æ£éç»ç', |
|---|
| | | current: 0, |
|---|
| | | isPicking: false, |
|---|
| | | istrue: false, |
|---|
| | | barcode: '', |
|---|
| | | materialsns: "", |
|---|
| | | boxBarcodes: [], |
|---|
| | | sns: [], |
|---|
| | | barcodefocus: true, |
|---|
| | | totalNum: 0, |
|---|
| | | pickNum: 0, |
|---|
| | | num: null, |
|---|
| | | orderTotalNum: 0, |
|---|
| | | orderPickNum: 0, |
|---|
| | | orderNo: "", |
|---|
| | | matTotal: [], |
|---|
| | | istrue2: false, |
|---|
| | | barcode2: '', |
|---|
| | | Summmary:0, |
|---|
| | | innerboxcode: "", |
|---|
| | | takeStockObj:null, |
|---|
| | | sns2: [], |
|---|
| | | barcodefocus: true, |
|---|
| | | addressFocus: false, |
|---|
| | | inboundBarcode: "", |
|---|
| | | address: "", |
|---|
| | | addressdisabled: false, |
|---|
| | | warehouseId:"", |
|---|
| | | stockInfoDetail:[] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onLoad(res) { |
|---|
| | | this.barcodefocus = false; |
|---|
| | | this.istrue = false; |
|---|
| | | this.warehouseId = res.warehouseId; |
|---|
| | | this.orderNo=res.orderNo; |
|---|
| | | if (this.warehouseId == 3) { //æ¿æä»åºåºID |
|---|
| | | this.address = "1011"; |
|---|
| | | this.addressdisabled = true; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | onClickItem(e) { |
|---|
| | | this.focus = false; |
|---|
| | | this.addressFocus = false; |
|---|
| | | if (this.current !== e.currentIndex) { |
|---|
| | | this.current = e.currentIndex; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | inbound() { |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | "barcode": this.inboundBarcode, |
|---|
| | | "startPoint": this.address, |
|---|
| | | "warehouseId": this.warehouseId |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.$u.post('/api/Task/RequestInboundTask', postData).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.inboundBarcode = ""; |
|---|
| | | if (this.warehouseId !== 3) //æ¿æä»åºåºID |
|---|
| | | { |
|---|
| | | this.address = ""; |
|---|
| | | } |
|---|
| | | this.Summmary=0; |
|---|
| | | this.stockInfoDetail=[]; |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "æå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }).catch(err => { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: err.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | inputChangebarcode3() { |
|---|
| | | this.addressFocus = false; |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.inboundBarcode != '') { |
|---|
| | | this.addressFocus = true; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.inboundBarcode != '') { |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | "barcode": this.inboundBarcode, |
|---|
| | | "warehouseId": this.warehouseId, |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | this.$u.post('/api/StockInfo/StockQueryData', postData).then(res => { |
|---|
| | | // this.stockInfo = []; |
|---|
| | | this.stockInfoDetail = []; |
|---|
| | | this.Summmary=0; |
|---|
| | | if (res.status) { |
|---|
| | | // this.stockInfo = res.data, |
|---|
| | | this.stockInfoDetail = res.data.details |
|---|
| | | //è·åæ»æ°é |
|---|
| | | this.stockInfoDetail.forEach(item => { |
|---|
| | | this.Summmary += item.stockQuantity; |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | // title: "æªæ¾å°æçä¿¡æ¯", |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | picking() { |
|---|
| | | if (this.barcode == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«ææçæ¡ç ", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if(this.num==null || this.num==undefined){ |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "çç¹æ°éä¸è½ä¸ºç©º(å¯å¡«0âæææ°åå¼)", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if(this.takeStockObj==null){ |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "çç¹ä¿¡æ¯ä¸ºç©º", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var params = { |
|---|
| | | MainData: { |
|---|
| | | "num": this.num, |
|---|
| | | "id": this.takeStockObj.id |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.$u.post('/api/TakeStockOrder/MatPicking', params).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.barcode=""; |
|---|
| | | this.takeStockObj=null; |
|---|
| | | this.num=null; |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "çç¹æå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | inputChange(e) { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.istrue = false; |
|---|
| | | var matInfo = this.materialsns.split('|'); |
|---|
| | | if (matInfo.length == 7) { |
|---|
| | | var matObj = { |
|---|
| | | matCode: matInfo[1], |
|---|
| | | matProductionDate: matInfo[3], |
|---|
| | | matQty: matInfo[5], |
|---|
| | | orderNo: matInfo[6], |
|---|
| | | sn: this.materialsns, |
|---|
| | | isPicking: this.isPicking |
|---|
| | | } |
|---|
| | | var temp = this.boxBarcodes.find(x => x.orderNo == matObj.orderNo); |
|---|
| | | if (!temp) { |
|---|
| | | var tmp = this.matTotal.find(x => x.matCode == matObj.matCode); |
|---|
| | | if (!tmp) { |
|---|
| | | this.matTotal.push({ |
|---|
| | | matCode: matObj.matCode, |
|---|
| | | matQuantity: parseInt(matObj.matQty) |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | tmp.matQuantity += parseInt(matObj.matQty); |
|---|
| | | } |
|---|
| | | this.sns.push({ |
|---|
| | | innerboxcode: this.materialsns, |
|---|
| | | isSplit: this.isPicking |
|---|
| | | }); |
|---|
| | | this.boxBarcodes.push(matObj); |
|---|
| | | this.isPicking = false; |
|---|
| | | setTimeout(this.updateFocus, 100); |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "æ«ç éå¤", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | setTimeout(this.updateFocus, 100); |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "æ«ç é误,请æ«ææ£ç¡®å
ç®±ç ", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | setTimeout(this.updateFocus, 100); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | checkedClick() { |
|---|
| | | this.isPicking = !this.isPicking; |
|---|
| | | this.istrue = false; |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.barcode != '') { |
|---|
| | | this.istrue = true; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | updateFocus() { |
|---|
| | | this.materialsns = ''; |
|---|
| | | if (!this.istrue) { |
|---|
| | | this.istrue = true; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | inputChangebarcode() { |
|---|
| | | this.istrue = false; |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.barcode != '') { |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | "orderNo": this.orderNo, |
|---|
| | | "takePalletCode": this.barcode |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | this.$u.post('/api/TakeStockOrder/GetTakeDetailInfo', postData).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.takeStockObj=null; |
|---|
| | | this.takeStockObj= res.data; |
|---|
| | | } else { |
|---|
| | | this.barcode=""; |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.istrue = true; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | deleteList(res) { |
|---|
| | | this.matTotal.map((item, index) => { |
|---|
| | | var temp = this.boxBarcodes.find(x => x.sn == res); |
|---|
| | | if (temp) { |
|---|
| | | if (item.matCode == temp.matCode) { |
|---|
| | | if (item.matQuantity - temp.matQty == 0) { |
|---|
| | | this.matTotal.splice(index, 1); |
|---|
| | | } else { |
|---|
| | | item.matQuantity -= temp.matQty; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.sns.map((item, index) => { |
|---|
| | | if (item.innerboxcode == res) { |
|---|
| | | this.sns.splice(index, 1); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.boxBarcodes.map((item, index) => { |
|---|
| | | if (item.sn == res) { |
|---|
| | | this.boxBarcodes.splice(index, 1); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | submit() { |
|---|
| | | if (this.barcode2 == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«ææçæ¡ç ", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.innerboxcode == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«æå
ç®±æ ç¾", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.$u.post('/api/StockOperate/PickingBoxing', { |
|---|
| | | MainData: { |
|---|
| | | "barcode": this.barcode2, |
|---|
| | | "innerboxcode": this.innerboxcode |
|---|
| | | }, |
|---|
| | | DelKeys: this.sns2 |
|---|
| | | }).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | uni.$showMsg('ç»çæå!') |
|---|
| | | this.barcode2 = ""; |
|---|
| | | this.innerboxcode = ""; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }).catch(err => { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: err.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | inputChange2(e) { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | inputChangebarcode2() { |
|---|
| | | this.istrue2 = false; |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.barcode2 != '') { |
|---|
| | | this.istrue2 = true; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '@/common/uni-ui.scss'; |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | display: flex; |
|---|
| | | height: 150px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content-text { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .itemstyle { |
|---|
| | | margin-top: 20px; |
|---|
| | | margin-left: 5%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .headerstyle { |
|---|
| | | width: 90%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <u-sticky> |
|---|
| | | <view style="background-color: #ffffff;"> |
|---|
| | | <uni-search-bar @confirm="search" v-model="searchValue"></uni-search-bar> |
|---|
| | | </view> |
|---|
| | | </u-sticky> |
|---|
| | | <uni-list :border="true"> |
|---|
| | | <uni-list-item direction="column" clickable @click="groupClick(item.orderNo)" link |
|---|
| | | :to="page+item.orderNo+'&warehouseId='+warehouseId+'&id='+item.id" v-for="item in allReceivingOrders" |
|---|
| | | :key="item.orderNo"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <uni-group margin-top="20"> |
|---|
| | | <view style="line-height: 17px;color: #596671;font-size: 14px;text-align: center;display: flex;justify-content: space-between;"> |
|---|
| | | çç¹åå· {{item.orderNo}} |
|---|
| | | </view> |
|---|
| | | <view style="line-height: 17px;color: #596671;font-size: 14px;text-align: center;display: flex;justify-content: space-between;"> |
|---|
| | | å建æ¶é´ {{item.createDate}} |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | style="margin-top: 10rpx;display: flex;align-items: center; "> |
|---|
| | | <view style="text-align: center;line-height: 40rpx;border-radius: 8rpx; width: 238rpx;height: 40rpx;font-size: 22rpx;background-color:rgba(22,127,247,0.18);color: #1F63FF;"> |
|---|
| | | çç¹ç¶æ {{item.takeStockStatus}} |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </uni-group> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | |
|---|
| | | </uni-list> |
|---|
| | | <uni-load-more :status="status" v-if="loadVisible"></uni-load-more> |
|---|
| | | |
|---|
| | | <u-back-top :scroll-top="scrollTop" top="400"></u-back-top> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { TakeStockStatus } from '../../common/config.js' |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | page: "/pages/stash/TakeStock?orderNo=", |
|---|
| | | loadVisible: false, |
|---|
| | | searchValue: "", |
|---|
| | | warehouseId: "", |
|---|
| | | status: "more", |
|---|
| | | allReceivingOrders: [], |
|---|
| | | pageNo: 1, |
|---|
| | | scrollTop: 0, |
|---|
| | | isLoaded:false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onLoad(res) { |
|---|
| | | this.warehouseId = res.warehouseId; |
|---|
| | | this.isLoaded = true; |
|---|
| | | this.getData(); |
|---|
| | | }, |
|---|
| | | onPageScroll(e) { |
|---|
| | | this.scrollTop = e.scrollTop; |
|---|
| | | }, |
|---|
| | | onShow() { |
|---|
| | | if (this.isLoaded) { |
|---|
| | | // ä»å
¶ä»é¡µé¢è¿åæ¶å·æ° |
|---|
| | | this.getData(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onReachBottom() { |
|---|
| | | this.pageNo += 1; |
|---|
| | | this.getData(); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | search(res) { |
|---|
| | | this.pageNo = 1; |
|---|
| | | this.getData(); |
|---|
| | | }, |
|---|
| | | groupClick() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | getData() { |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | orderNo: this.searchValue, |
|---|
| | | pageNo: this.pageNo, |
|---|
| | | warehouseId: this.warehouseId, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | this.$u.post('/api/TakeStockOrder/GetTakeStockOrders', postData).then((res) => { |
|---|
| | | if (res.status) { |
|---|
| | | if (res.data.length > 0) { |
|---|
| | | if (this.searchValue == '') { |
|---|
| | | this.allReceivingOrders =res.data.map(i => ({ |
|---|
| | | ...i, |
|---|
| | | takeStockStatus: TakeStockStatus.find(item => item.value == i |
|---|
| | | .takeStockStatus).label |
|---|
| | | })) |
|---|
| | | // this.allReceivingOrders = res.data; |
|---|
| | | if (this.allReceivingOrders.length > 3) { |
|---|
| | | this.loadVisible = true; |
|---|
| | | } else { |
|---|
| | | this.loadVisible = false; |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | // this.allReceivingOrders = res.data; |
|---|
| | | if (postData.MainData.pageNo == 1) { |
|---|
| | | this.allReceivingOrders = []; |
|---|
| | | } |
|---|
| | | this.allReceivingOrders =res.data.map(i => ({ |
|---|
| | | ...i, |
|---|
| | | takeStockStatus: TakeStockStatus.find(item => item.value == i |
|---|
| | | .takeStockStatus).label |
|---|
| | | })) |
|---|
| | | if (this.allReceivingOrders.length > 3) { |
|---|
| | | this.loadVisible = true; |
|---|
| | | } else { |
|---|
| | | this.loadVisible = false; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.status = 'noMore'; |
|---|
| | | //this.allReceivingOrders = []; |
|---|
| | | this.loadVisible = true; |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '@/common/uni-ui.scss'; |
|---|
| | | |
|---|
| | | page { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | box-sizing: border-box; |
|---|
| | | background-color: #efeff4; |
|---|
| | | min-height: 100%; |
|---|
| | | height: auto; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tips { |
|---|
| | | color: #67c23a; |
|---|
| | | font-size: 14px; |
|---|
| | | line-height: 40px; |
|---|
| | | text-align: center; |
|---|
| | | background-color: #f0f9eb; |
|---|
| | | height: 0; |
|---|
| | | opacity: 0; |
|---|
| | | transform: translateY(-100%); |
|---|
| | | transition: all 0.3s; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tips-ani { |
|---|
| | | transform: translateY(0); |
|---|
| | | height: 40px; |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | width: 100%; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .list-picture { |
|---|
| | | width: 100%; |
|---|
| | | height: 145px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .thumb-image { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .ellipsis { |
|---|
| | | display: flex; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-ellipsis-1 { |
|---|
| | | overflow: hidden; |
|---|
| | | white-space: nowrap; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-ellipsis-2 { |
|---|
| | | overflow: hidden; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | display: -webkit-box; |
|---|
| | | -webkit-line-clamp: 2; |
|---|
| | | -webkit-box-orient: vertical; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .customcss { |
|---|
| | | display: flex; |
|---|
| | | position: fixed; |
|---|
| | | width: 100%; |
|---|
| | | top: 10px; |
|---|
| | | text-align: center; |
|---|
| | | z-index: 999; |
|---|
| | | left: 30px; |
|---|
| | | height: 20%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .footer { |
|---|
| | | padding-top: 50%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"> |
|---|
| | | </uni-segmented-control> |
|---|
| | | <view class="content"> |
|---|
| | | <view v-if="current === 0" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="180"> |
|---|
| | | <uni-forms-item label="æçæ¡ç :"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«ææçæ¡ç " ref='midInput' :focus="!focus" |
|---|
| | | v-model="barcode" @confirm="barcodeInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item label="å
ç®±æ ç¾:"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«æå
ç®±æ ç¾" ref='midInput' :focus="focus" |
|---|
| | | v-model="materSn" @confirm="snInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item :label="Testlabel" v-if="Test"> |
|---|
| | | <uni-easyinput type="text" :placeholder="Testplaceholder" ref='midInput' |
|---|
| | | v-model="Initiallife" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <!-- <uni-forms-item> |
|---|
| | | <checkbox checked="check">æ¯å¦æ»¡ç</checkbox> |
|---|
| | | </uni-forms-item> --> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="submit" type="primary" size="default" style="margin-top: 2%;">ç»ç</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | <uni-list> |
|---|
| | | <!-- <uni-list-item direction="column" v-for="item in matTotal" :key="item.matCode"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">ç©æç¼ç ï¼{{item.matCode}}</view> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">æ°éï¼{{item.matQuantity}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> --> |
|---|
| | | <uni-list-item direction="column" v-for="(item,index) in matInfos" :key="index"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <uni-icons type="trash" size="22" style="position: absolute;right: 5%;" |
|---|
| | | @click="deleteList(index)"> |
|---|
| | | </uni-icons> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">éè´åå·ï¼{{item.purchaseOrderNo}}</view> |
|---|
| | | <view class="uni-note">ç©æç¼ç ï¼{{item.materielCode}}</view> |
|---|
| | | <view class="uni-note">æ¹æ¬¡å·ï¼{{item.lotNo}}</view> |
|---|
| | | <view class="uni-note">æ°éï¼{{item.quantity}}</view> |
|---|
| | | <view class="uni-note">ç产æ¥æï¼{{item.productionDate}}</view> |
|---|
| | | <view class="uni-note">æææï¼{{item.effectiveDate}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="current === 1" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="120"> |
|---|
| | | <uni-forms-item label="æçæ¡ç "> |
|---|
| | | <uni-easyinput type="text" :focus="!addressFocus" v-model="inboundBarcode" |
|---|
| | | placeholder="请æ«ææçæ¡ç " ref='midInput' @confirm="inputChangebarcode" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item label="å°åæ¡ç "> |
|---|
| | | <uni-easyinput type="text" v-model="address" :disabled="addressdisabled" |
|---|
| | | placeholder="请æ«æå°åæ¡ç " ref='midInput' :focus="addressFocus" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="inbound" type="primary" size="default" style="margin-top: 2%;">å
¥åºç¡®è®¤</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | </view> |
|---|
| | | <view> |
|---|
| | | <uni-list> |
|---|
| | | <uni-list-item direction="column" v-if="inboundBarcode"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">ç»çæ»æ°éï¼{{Summmary}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | <uni-list-item direction="column" v-for="(item,index) in stockInfoDetail" :key="index"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">ç©æç¼å·ï¼{{item.materielCode}}</view> |
|---|
| | | <view class="uni-note">ç©æå称ï¼{{item.materielName}}</view> |
|---|
| | | <view class="uni-note">ç©ææ¹æ¬¡ï¼{{item.batchNo}}</view> |
|---|
| | | <view class="uni-note">ç»çæ°éï¼{{item.stockQuantity}}</view> |
|---|
| | | <view class="uni-note">ç产æ¥æï¼{{item.productionDate}}</view> |
|---|
| | | <view class="uni-note">æ æ æï¼{{item.effectiveDate}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="current === 2" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="180"> |
|---|
| | | <uni-forms-item label="å
ç®±æ ç¾:"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«æå
ç®±æ ç¾" ref='midInput' :focus="pkfocus" |
|---|
| | | v-model="pkmaterSn" @confirm="pksnInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="pksubmit" type="primary" size="default" style="margin-top: 2%;">å
¥å¹³åº</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | <uni-list> |
|---|
| | | <uni-list-item direction="column" v-for="(item,index) in pkmatInfos" :key="index"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <uni-icons type="trash" size="22" style="position: absolute;right: 5%;" |
|---|
| | | @click="pkdeleteList(index)"> |
|---|
| | | </uni-icons> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">éè´åå·ï¼{{item.purchaseOrderNo}}</view> |
|---|
| | | <view class="uni-note">ç©æç¼ç ï¼{{item.materielCode}}</view> |
|---|
| | | <view class="uni-note">æ¹æ¬¡å·ï¼{{item.lotNo}}</view> |
|---|
| | | <view class="uni-note">æ°éï¼{{item.quantity}}</view> |
|---|
| | | <view class="uni-note">ç产æ¥æï¼{{item.productionDate}}</view> |
|---|
| | | <view class="uni-note">æææï¼{{item.effectiveDate}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <u-toast ref="uToast" /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const innerAudioContext = uni.createInnerAudioContext(); |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | items: ['ç»ç', 'å
¥åº'], //, 'åæ®ä¿¡æ¯', '解ç' |
|---|
| | | current: 0, |
|---|
| | | matTotal: [], |
|---|
| | | matInfos: [], |
|---|
| | | orderNo: "", |
|---|
| | | label: "", |
|---|
| | | orderInfo: [], |
|---|
| | | focus: false, |
|---|
| | | pkfocus: false, |
|---|
| | | barcode: "", |
|---|
| | | materSn: "", |
|---|
| | | Initiallife: 1000, |
|---|
| | | sns: [], |
|---|
| | | sn: "", |
|---|
| | | addressFocus: false, |
|---|
| | | inboundBarcode: "", |
|---|
| | | address: "", |
|---|
| | | check: true, |
|---|
| | | value: "", |
|---|
| | | matInfo: [], |
|---|
| | | value2: "", |
|---|
| | | matTotals: [], |
|---|
| | | warehouseId: "", |
|---|
| | | Test: false, |
|---|
| | | Testlabel: "", |
|---|
| | | Testplaceholder: "", |
|---|
| | | Testcheck: false, |
|---|
| | | Summmary: 0, |
|---|
| | | stockInfoDetail: [], |
|---|
| | | addressdisabled: false, |
|---|
| | | pksns: [], |
|---|
| | | pkmaterSn: "", |
|---|
| | | pkmatInfos: [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onShow() {}, |
|---|
| | | onLoad(res) { |
|---|
| | | this.focus = false; |
|---|
| | | this.addressFocus = false; |
|---|
| | | this.orderNo = res.orderNo; |
|---|
| | | this.warehouseId = res.warehouseId; |
|---|
| | | if (this.warehouseId == 6) { //æµè¯æ¶ä»åºåºID |
|---|
| | | this.Test = true; |
|---|
| | | this.Testlabel = "åå§å¯¿å½:"; |
|---|
| | | this.Testplaceholder = "请è¾å
¥åå§å¯¿å½"; |
|---|
| | | } else if (this.warehouseId == 2) { //油墨ä»åºåºID |
|---|
| | | this.Test = true; |
|---|
| | | this.Testlabel = "æ°é:"; |
|---|
| | | this.Testplaceholder = "请è¾å
¥æ°é"; |
|---|
| | | this.Initiallife = 16; |
|---|
| | | } else if (this.warehouseId == 5) { //è¾
æä»åºåºID |
|---|
| | | this.address = "8005"; |
|---|
| | | this.items.push("å
¥å¹³åº"); |
|---|
| | | this.items[1] = "å
¥ç«åº"; |
|---|
| | | this.address = "8005"; |
|---|
| | | } else if (this.warehouseId == 3) { //è¾
æä»åºåºID |
|---|
| | | this.address = "1011"; |
|---|
| | | this.addressdisabled = true; |
|---|
| | | } |
|---|
| | | this.label = "åæ®ç¼å·ï¼" + this.orderNo; |
|---|
| | | this.getData(); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // voiceSpeech(src) { |
|---|
| | | // innerAudioContext.src = src; // '../../static/success.mp3'; |
|---|
| | | // innerAudioContext.play(); |
|---|
| | | // }, |
|---|
| | | //wmså
¥å¹³åº |
|---|
| | | pksubmit() { |
|---|
| | | if (this.pkmatInfos.length == 0) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«æå
ç®±æ ç¾", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.$u.post('/api/InboundOrder/WMSInPinKu?warehouseId=' + this.warehouseId, this |
|---|
| | | .pksns).then(res => { |
|---|
| | | debugger |
|---|
| | | if (res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "å
¥åºæå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | this.focus = false; |
|---|
| | | this.pkmatInfos = []; |
|---|
| | | this.pksns = []; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | pksnInput() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | if (this.pkmaterSn != "") { |
|---|
| | | this.focus = false; |
|---|
| | | var matSn = this.pkmaterSn; |
|---|
| | | setTimeout(() => { |
|---|
| | | this.pkmaterSn = ""; |
|---|
| | | }, 10); |
|---|
| | | this.$u.post('/api/MaterielInfo/CodeAnalysis?serNum=' + matSn, {}).then((res) => { |
|---|
| | | if (res.status) { |
|---|
| | | this.pksns.push(res.data.serialNumber); |
|---|
| | | this.pkmatInfos.push(res.data); |
|---|
| | | if (!res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/fail.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/success.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | return; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/fail.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | //解ç |
|---|
| | | releasebox() { |
|---|
| | | if (this.value.length == 0) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«ç ", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var param; |
|---|
| | | var matInfo = this.value.split('|'); |
|---|
| | | if (matInfo.length == 7) { |
|---|
| | | param = { |
|---|
| | | MainData: { |
|---|
| | | "innerCode": this.value |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | param = { |
|---|
| | | MainData: { |
|---|
| | | "barcode": this.value |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.$u.post('/api/StockOperate/ReleaseAllBox', param).then(resdt => { |
|---|
| | | if (resdt.status) { |
|---|
| | | uni.$showMsg('解çæå!') |
|---|
| | | this.value = ""; |
|---|
| | | this.matInfo = []; |
|---|
| | | this.matTotals = []; |
|---|
| | | this.value2 = ""; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: resdt.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | releaseboxInput() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | if (this.value.length == 0) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var matInfo = this.value.split('|'); |
|---|
| | | this.matInfo = []; |
|---|
| | | if (matInfo.length == 7) { |
|---|
| | | this.$u.post('/api/StockOperate/GetStockInfoByInnerCode', { |
|---|
| | | MainData: { |
|---|
| | | "innerCode": this.value |
|---|
| | | } |
|---|
| | | }).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.matInfo = res.data.stockInfo; |
|---|
| | | this.matTotals = res.data.stockTotal; |
|---|
| | | this.value2 = res.data.barcode; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | this.$u.post('/api/StockOperate/GetStockInfoByBarcode', { |
|---|
| | | MainData: { |
|---|
| | | "barcode": this.value |
|---|
| | | } |
|---|
| | | }).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.matInfo = res.data.stockInfo; |
|---|
| | | this.matTotals = res.data.stockTotal; |
|---|
| | | this.value2 = res.data.barcode; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | updateFocus() { |
|---|
| | | debugger |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.materSn = ''; |
|---|
| | | if (!this.focus) { |
|---|
| | | this.focus = true; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | barcodeFocus() { |
|---|
| | | debugger |
|---|
| | | this.barcode = ''; |
|---|
| | | if (this.focus) { |
|---|
| | | this.focus = false; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | getData() { |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | orderNo: this.orderNo |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | this.$u.post('/api/InboundOrderDetail/GetInboundOrderDetails', postData).then((res) => { |
|---|
| | | if (res.status) { |
|---|
| | | this.orderInfo = res.data; |
|---|
| | | if (this.orderInfo.length > 3) { |
|---|
| | | this.loadVisible = true; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | onClickItem(e) { |
|---|
| | | this.focus = false; |
|---|
| | | this.addressFocus = false; |
|---|
| | | if (this.current !== e.currentIndex) { |
|---|
| | | this.current = e.currentIndex; |
|---|
| | | if (this.current == 2) { |
|---|
| | | this.getData(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | barcodeInput() { |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.barcode.length > 0) { |
|---|
| | | // if (this.barcode.substring(0, 1) == 'A' || this.barcode.substring(0, 2) == 'TP') { |
|---|
| | | this.focus = true; |
|---|
| | | // } else { |
|---|
| | | // this.$refs.uToast.show({ |
|---|
| | | // title: "æ«ç é误,请æ«ææçç ", |
|---|
| | | // type: "error" |
|---|
| | | // }) |
|---|
| | | // } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | snInput() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | if (this.warehouseId == 6 || this.warehouseId == 2 || this.warehouseId == 3) { |
|---|
| | | if (this.sns.length > 0) { |
|---|
| | | this.sns = []; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (this.materSn != "") { |
|---|
| | | this.focus = false; |
|---|
| | | if(this.warehouseId==11){ |
|---|
| | | this.materSn=this.materSn.replace(/,SC.*/, ''); |
|---|
| | | } |
|---|
| | | if (this.materSn.split(',').length != 6) { |
|---|
| | | this.materSn = ""; |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var matSn = this.materSn; |
|---|
| | | //setTimeout(() => { |
|---|
| | | this.materSn = ""; |
|---|
| | | //}, 10); |
|---|
| | | this.$u.post('/api/MaterielInfo/CodeAnalysis?serNum=' + matSn, {}).then((res) => { |
|---|
| | | this.Testcheck = false; |
|---|
| | | if (res.status) { |
|---|
| | | this.sns.push(res.data.serialNumber); |
|---|
| | | if (this.warehouseId == 6 || this.warehouseId == 2 || this.warehouseId == |
|---|
| | | 3) { |
|---|
| | | if (this.matInfos.length > 0) { |
|---|
| | | this.matInfos = []; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.matInfos.push(res.data); |
|---|
| | | if (!res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/fail.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/success.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/fail.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | inbound() { |
|---|
| | | if (this.inboundBarcode == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«ææçæ¡ç ", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.address == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«æå°åæ¡ç ", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | "barcode": this.inboundBarcode, |
|---|
| | | "startPoint": this.address, |
|---|
| | | "warehouseId": this.warehouseId |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.$u.post('/api/Task/RequestInboundTask', postData).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.inboundBarcode = ""; |
|---|
| | | if (this.warehouseId != 5 && this.warehouseId != 3) this.address = ""; |
|---|
| | | this.stockInfoDetail = []; |
|---|
| | | //è·åæ»æ°é |
|---|
| | | this.Summmary = 0; |
|---|
| | | setTimeout(() => { |
|---|
| | | this.addressFocus = false; |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "æå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | }, 200); |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }).catch(err => { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: err.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | inputChangebarcode() { |
|---|
| | | this.addressFocus = false; |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.inboundBarcode != '') { |
|---|
| | | this.addressFocus = true; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.inboundBarcode != '') { |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | "barcode": this.inboundBarcode, |
|---|
| | | "warehouseId": this.warehouseId, |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | this.$u.post('/api/StockInfo/StockQueryData', postData).then(res => { |
|---|
| | | // this.stockInfo = []; |
|---|
| | | this.stockInfoDetail = []; |
|---|
| | | if (res.status) { |
|---|
| | | // this.stockInfo = res.data, |
|---|
| | | this.stockInfoDetail = res.data.details |
|---|
| | | //è·åæ»æ°é |
|---|
| | | this.stockInfoDetail.forEach(item => { |
|---|
| | | this.Summmary += item.stockQuantity; |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | // title: "æªæ¾å°æçä¿¡æ¯", |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | deleteList(res) { |
|---|
| | | this.matInfos.splice(res, 1); |
|---|
| | | this.sns.splice(res, 1); |
|---|
| | | }, |
|---|
| | | submit() { |
|---|
| | | if (this.barcode == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«ææçæ¡ç ", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.matInfos.length == 0) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«æå
ç®±æ ç¾", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.Test) { |
|---|
| | | if (!this.Testcheck) { |
|---|
| | | this.Testcheck = true; |
|---|
| | | if (this.warehouseId == 2) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请确认æ°é", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | } else if (this.warehouseId == 6) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请确认åå§å¯¿å½", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (this.warehouseId == 2) { //油墨ä»åºåºID |
|---|
| | | this.sn = this.sns[0]; |
|---|
| | | for (var i = 0; i < this.Initiallife - 1; i++) { |
|---|
| | | this.sns.push(this.sn); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | let url = 'palletCode=' + this.barcode + '&initiallife=' + this.Initiallife + '&warehouseId=' + this |
|---|
| | | .warehouseId; |
|---|
| | | |
|---|
| | | this.$u.post('/api/InboundOrder/ManualMaterielGroup?' + url, this.sns).then(res => { |
|---|
| | | this.Testcheck = false; |
|---|
| | | if (res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "ç»çæå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | this.focus = false; |
|---|
| | | this.barcode = ""; |
|---|
| | | this.matInfos = []; |
|---|
| | | this.sns = []; |
|---|
| | | this.matTotal = []; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '@/common/uni-ui.scss'; |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | display: flex; |
|---|
| | | height: 150px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content-text { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .itemstyle { |
|---|
| | | margin-top: 30px; |
|---|
| | | margin-left: 5%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .headerstyle { |
|---|
| | | width: 90%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <u-sticky> |
|---|
| | | <view style="background-color: #ffffff;"> |
|---|
| | | <uni-search-bar @confirm="search" v-model="searchValue"></uni-search-bar> |
|---|
| | | </view> |
|---|
| | | </u-sticky> |
|---|
| | | <uni-list :border="true"> |
|---|
| | | <uni-list-item direction="column" clickable @click="groupClick(item.orderNo)" link |
|---|
| | | :to="page+item.orderNo" v-for="item in allReceivingOrders" :key="item.orderNo"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <uni-group margin-top="20"> |
|---|
| | | <view style="line-height: 17px;color: #596671;font-size: 14px;text-align: center;display: flex;justify-content: space-between;"> |
|---|
| | | å
¥åºåå· {{item.orderNo}} |
|---|
| | | </view> |
|---|
| | | <view style="margin-top: 10rpx;line-height: 17px;color: #596671;font-size: 14px;text-align: center;display: flex;justify-content: space-between;"> |
|---|
| | | å建人å {{item.creater}} |
|---|
| | | </view> |
|---|
| | | <view style="margin-top: 10rpx;line-height: 17px;color: #596671;font-size: 14px;text-align: center;display: flex;justify-content: space-between;"> |
|---|
| | | å建æ¥æ {{item.createDate}} |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | style="margin-top: 10rpx;display: flex;align-items: center; "> |
|---|
| | | <view style="text-align: center;line-height: 40rpx;border-radius: 8rpx; width: 238rpx;height: 40rpx;font-size: 22rpx;background-color:rgba(22,127,247,0.18);color: #1F63FF;"> |
|---|
| | | 订åç¶æ {{item.InboundOrderStatus}} |
|---|
| | | </view> |
|---|
| | | <view style="text-align: center;line-height: 40rpx;border-radius: 8rpx; width: 158rpx;height: 40rpx;font-size: 22rpx;color: #F56C6C;"> |
|---|
| | | æ»é {{item.SumQty}} |
|---|
| | | </view> |
|---|
| | | <view style="text-align: center;line-height: 40rpx;border-radius: 8rpx; width: 158rpx;height: 40rpx;font-size: 22rpx;color: #F56C6C;"> |
|---|
| | | å·²å
¥ {{item.OverQty}} |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </uni-group> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | |
|---|
| | | </uni-list> |
|---|
| | | <uni-load-more :status="status" v-if="loadVisible"></uni-load-more> |
|---|
| | | |
|---|
| | | <u-back-top :scroll-top="scrollTop" top="400"></u-back-top> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { InboundOrderStatus } from '../../common/config.js' |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | page: "/pages/stash/raworderboxing?", |
|---|
| | | loadVisible: false, |
|---|
| | | searchValue: "", |
|---|
| | | status: "more", |
|---|
| | | allReceivingOrders: [], |
|---|
| | | pageNo: 1, |
|---|
| | | scrollTop: 0, |
|---|
| | | warehouseId: "", |
|---|
| | | isLoaded:false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onLoad(res) { |
|---|
| | | this.warehouseId = res.warehouseId; |
|---|
| | | this.page = this.page + "warehouseId=" + this.warehouseId + "&orderNo="; |
|---|
| | | this.getData(); |
|---|
| | | }, |
|---|
| | | onReachBottom() { |
|---|
| | | this.pageNo += 1; |
|---|
| | | this.getData(); |
|---|
| | | this.isLoaded=true; |
|---|
| | | }, |
|---|
| | | onShow() { |
|---|
| | | if (this.isLoaded) { |
|---|
| | | // ä»å
¶ä»é¡µé¢è¿åæ¶å·æ° |
|---|
| | | this.getData(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onPageScroll(e) { |
|---|
| | | this.scrollTop = e.scrollTop; |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | search(res) { |
|---|
| | | this.getData(); |
|---|
| | | }, |
|---|
| | | groupClick() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | getData() { |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | warehouseId: this.warehouseId, |
|---|
| | | orderNo: this.searchValue, |
|---|
| | | pageNo: this.pageNo |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | this.$u.post('/api/InboundOrder/GetInboundOrders', postData).then((res) => { |
|---|
| | | if (res.status) { |
|---|
| | | if (res.data.length > 0) { |
|---|
| | | if (this.searchValue == '') { |
|---|
| | | this.allReceivingOrders = res.data.map(i => ({ |
|---|
| | | ...i, |
|---|
| | | InboundOrderStatus: InboundOrderStatus.find(item => item.value == i |
|---|
| | | .orderStatus).label, |
|---|
| | | SumQty: i.details.map(item => item.orderQuantity).reduce((prev, next) => prev + next, 0), |
|---|
| | | OverQty: i.details.map(item => item.overInQuantity).reduce((prev, next) => prev + next, 0) |
|---|
| | | })); |
|---|
| | | // this.allReceivingOrders = res.data; |
|---|
| | | if (this.allReceivingOrders.length > 3) { |
|---|
| | | this.loadVisible = true; |
|---|
| | | } else { |
|---|
| | | this.loadVisible = false; |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.allReceivingOrders = res.data.map(i => ({ |
|---|
| | | ...i, |
|---|
| | | InboundOrderStatus: InboundOrderStatus.find(item => item.value == i |
|---|
| | | .orderStatus).label, |
|---|
| | | SumQty: i.details.map(item => item.orderQuantity).reduce((prev, next) => prev + next, 0), |
|---|
| | | OverQty: i.details.map(item => item.overInQuantity).reduce((prev, next) => prev + next, 0) |
|---|
| | | })); |
|---|
| | | if (this.allReceivingOrders.length > 3) { |
|---|
| | | this.loadVisible = true; |
|---|
| | | } else { |
|---|
| | | this.loadVisible = false; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.status = 'noMore'; |
|---|
| | | //this.allReceivingOrders = []; |
|---|
| | | this.loadVisible = true; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '@/common/uni-ui.scss'; |
|---|
| | | |
|---|
| | | page { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | box-sizing: border-box; |
|---|
| | | background-color: #efeff4; |
|---|
| | | min-height: 100%; |
|---|
| | | height: auto; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tips { |
|---|
| | | color: #67c23a; |
|---|
| | | font-size: 14px; |
|---|
| | | line-height: 40px; |
|---|
| | | text-align: center; |
|---|
| | | background-color: #f0f9eb; |
|---|
| | | height: 0; |
|---|
| | | opacity: 0; |
|---|
| | | transform: translateY(-100%); |
|---|
| | | transition: all 0.3s; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tips-ani { |
|---|
| | | transform: translateY(0); |
|---|
| | | height: 40px; |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | width: 100%; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .list-picture { |
|---|
| | | width: 100%; |
|---|
| | | height: 145px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .thumb-image { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .ellipsis { |
|---|
| | | display: flex; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-ellipsis-1 { |
|---|
| | | overflow: hidden; |
|---|
| | | white-space: nowrap; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-ellipsis-2 { |
|---|
| | | overflow: hidden; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | display: -webkit-box; |
|---|
| | | -webkit-line-clamp: 2; |
|---|
| | | -webkit-box-orient: vertical; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .customcss { |
|---|
| | | display: flex; |
|---|
| | | position: fixed; |
|---|
| | | width: 100%; |
|---|
| | | top: 10px; |
|---|
| | | text-align: center; |
|---|
| | | z-index: 999; |
|---|
| | | left: 30px; |
|---|
| | | height: 20%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .footer { |
|---|
| | | padding-top: 50%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <u-card :title="title" > --> |
|---|
| | | <view class="" slot="body"> |
|---|
| | | <!-- <view v-for="(item,index) in tree" :key="item.id"> --> |
|---|
| | | <u-grid :col="2"> |
|---|
| | | <u-grid-item @tap="clickCoupon(item.url)" v-for="(item) in tree" :key="item.menuId"> |
|---|
| | | <u-icon :name="item.icon" custom-prefix="custom-icon" size="50" |
|---|
| | | color="#888888"></u-icon> |
|---|
| | | <view class="grid-text">{{item.menuName}}</view> |
|---|
| | | </u-grid-item> |
|---|
| | | </u-grid> |
|---|
| | | <!-- </view> --> |
|---|
| | | <u-toast ref="uToast" /> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <!-- </u-card> --> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { |
|---|
| | | config |
|---|
| | | } from '../../common/config.js' |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // title: 'æä½åè½' |
|---|
| | | datas: [], |
|---|
| | | tree: [], |
|---|
| | | warehouseId: "", |
|---|
| | | version: "" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onShow() { |
|---|
| | | // uni.getSystemInfo({ |
|---|
| | | // success: (res) => { |
|---|
| | | // this.version = res.appWgtVersion; |
|---|
| | | // // console.log(res); |
|---|
| | | // //æ£æµå½åå¹³å°ï¼å¦ææ¯å®ååå¯å¨å®åæ´æ° |
|---|
| | | // if (res.platform == "android") { |
|---|
| | | // this.AndroidCheckUpdate(); |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // }); |
|---|
| | | }, |
|---|
| | | onLoad(res) { |
|---|
| | | // var id = this.$mp.query.id; |
|---|
| | | // this.warehouseId = this.$mp.query.warehouseId; |
|---|
| | | this.warehouseId = res.warehouseId; |
|---|
| | | uni.setNavigationBarTitle({ |
|---|
| | | title: res.menuName |
|---|
| | | }); |
|---|
| | | this.getCurrentTree(res.menuId); |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | AndroidCheckUpdate: function() { |
|---|
| | | var _this = this; |
|---|
| | | uni.request({ |
|---|
| | | url: 'http://10.1.211.101:9004/api/PDA/GetPDAVersion?version=' + this.version, |
|---|
| | | method: 'GET', |
|---|
| | | data: {}, |
|---|
| | | success: res => { |
|---|
| | | if (res.data.data) { |
|---|
| | | |
|---|
| | | uni.showToast({ |
|---|
| | | title: 'ææ°ççæ¬åå¸ï¼æ£æµå°æ¨ç®å为Wifiè¿æ¥ï¼ç¨åºå·²å¯å¨èªå¨æ´æ°ãæ°çæ¬ä¸è½½å®æåå°èªå¨å¼¹åºå®è£
ç¨åºã', |
|---|
| | | mask: false, |
|---|
| | | duration: 5000, |
|---|
| | | icon: "none" |
|---|
| | | }); |
|---|
| | | var dtask = plus.downloader.createDownload( |
|---|
| | | "http://10.1.211.101:9004/api/PDA/DownLoadApp", {}, |
|---|
| | | function(d, status) { |
|---|
| | | // ä¸è½½å®æ |
|---|
| | | if (status == 200) { |
|---|
| | | plus.runtime.install(plus.io.convertLocalFileSystemURL(d |
|---|
| | | .filename), {}, {}, function(error) { |
|---|
| | | uni.showToast({ |
|---|
| | | title: 'å®è£
失败', |
|---|
| | | mask: false, |
|---|
| | | duration: 1500 |
|---|
| | | }); |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | uni.showToast({ |
|---|
| | | title: 'æ´æ°å¤±è´¥', |
|---|
| | | mask: false, |
|---|
| | | duration: 1500 |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | dtask.start(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | fail: () => { |
|---|
| | | console.log('请æ±å¤±è´¥') |
|---|
| | | }, |
|---|
| | | complete: () => {} |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | getCurrentTree(id) { |
|---|
| | | this.$u.post('/api/Sys_Menu/GetTreeMenuPDAStash?ParentId=' + id, {}).then(result => { |
|---|
| | | this.tree = result; |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | getTree(id, data, isRootId) { |
|---|
| | | this.datas.forEach((x) => { |
|---|
| | | if (x.pid == id) { |
|---|
| | | x.lv = data.lv + 1; |
|---|
| | | if (isRootId) { |
|---|
| | | x.rootId = id; |
|---|
| | | } |
|---|
| | | if (!data.children) data.children = []; |
|---|
| | | data.children.push(x); |
|---|
| | | this.getTree(x.id, x, isRootId); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | getPermission(text) { |
|---|
| | | // return true; |
|---|
| | | return this.datas.find(x => x.text == text); |
|---|
| | | }, |
|---|
| | | clickCoupon(url) { |
|---|
| | | // console.log("clickCoupon") |
|---|
| | | if (this.hasLogin()) { |
|---|
| | | // this.$u.route(url) |
|---|
| | | this.$u.route({ |
|---|
| | | url: url, |
|---|
| | | params: { |
|---|
| | | warehouseId: this.warehouseId |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | this.$t.message.loading('ç»å½å¤±æ请éæ°ç»å½') |
|---|
| | | uni.reLaunch({ |
|---|
| | | url: '/pages/login/login' |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | lock() { |
|---|
| | | console.log("lock") |
|---|
| | | if (this.hasLogin()) { |
|---|
| | | this.$u.route("pages/feeding/feeding") |
|---|
| | | } else { |
|---|
| | | this.$t.message.loading('ç»å½å¤±æ请éæ°ç»å½') |
|---|
| | | uni.reLaunch({ |
|---|
| | | url: '/pages/login/login' |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | //å¤ææ¯å¦ç»å½ |
|---|
| | | hasLogin() { |
|---|
| | | let haslogin = uni.getStorageSync('jo_user') |
|---|
| | | if (haslogin == null || haslogin == "") { |
|---|
| | | return false |
|---|
| | | } else { |
|---|
| | | return true |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .grid-text { |
|---|
| | | font-size: 28rpx; |
|---|
| | | margin-top: 4rpx; |
|---|
| | | color: $u-type-info; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <u-sticky> |
|---|
| | | <view style="background-color: #ffffff;"> |
|---|
| | | <uni-search-bar @confirm="search" v-model="searchValue"></uni-search-bar> |
|---|
| | | </view> |
|---|
| | | </u-sticky> |
|---|
| | | <uni-list :border="true"> |
|---|
| | | <uni-list-item direction="column" clickable @click="groupClick(item.orderNo)" link |
|---|
| | | :to="page+item.orderNo" v-for="item in allReceivingOrders" :key="item.orderNo"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <uni-group margin-top="20"> |
|---|
| | | <view> åå·:{{item.orderNo}} </view> |
|---|
| | | <view> å建人:{{item.creater}} </view> |
|---|
| | | <view> æ¥æ:{{item.createDate}} </view> |
|---|
| | | </uni-group> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | |
|---|
| | | </uni-list> |
|---|
| | | <uni-load-more :status="status" v-if="loadVisible"></uni-load-more> |
|---|
| | | |
|---|
| | | <u-back-top :scroll-top="scrollTop" top="400"></u-back-top> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | page: "/pages/stash/outraworderboxing?", |
|---|
| | | loadVisible: false, |
|---|
| | | searchValue: "", |
|---|
| | | status: "more", |
|---|
| | | allReceivingOrders: [], |
|---|
| | | pageNo: 1, |
|---|
| | | scrollTop: 0, |
|---|
| | | warehouseId: "" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onLoad(res) { |
|---|
| | | this.warehouseId = res.warehouseId; |
|---|
| | | this.page = this.page + "warehouseId=" + this.warehouseId + "&orderNo="; |
|---|
| | | this.getData(); |
|---|
| | | }, |
|---|
| | | onReachBottom() { |
|---|
| | | this.pageNo += 1; |
|---|
| | | this.getData(); |
|---|
| | | }, |
|---|
| | | onPageScroll(e) { |
|---|
| | | this.scrollTop = e.scrollTop; |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | search(res) { |
|---|
| | | this.getData(); |
|---|
| | | }, |
|---|
| | | groupClick() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | getData() { |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | warehouseId: this.warehouseId, |
|---|
| | | orderNo: this.searchValue, |
|---|
| | | pageNo: this.pageNo |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | this.$u.post('/api/OutboundOrder/GetOutboundOrders', postData).then((res) => { |
|---|
| | | if (res.status) { |
|---|
| | | if (res.data.length > 0) { |
|---|
| | | if (this.searchValue == '') { |
|---|
| | | this.allReceivingOrders = this.allReceivingOrders.concat(res.data); |
|---|
| | | // this.allReceivingOrders = res.data; |
|---|
| | | if (this.allReceivingOrders.length > 3) { |
|---|
| | | this.loadVisible = true; |
|---|
| | | } else { |
|---|
| | | this.loadVisible = false; |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.allReceivingOrders = res.data; |
|---|
| | | if (this.allReceivingOrders.length > 3) { |
|---|
| | | this.loadVisible = true; |
|---|
| | | } else { |
|---|
| | | this.loadVisible = false; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.status = 'noMore'; |
|---|
| | | //this.allReceivingOrders = []; |
|---|
| | | this.loadVisible = true; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '@/common/uni-ui.scss'; |
|---|
| | | |
|---|
| | | page { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | box-sizing: border-box; |
|---|
| | | background-color: #efeff4; |
|---|
| | | min-height: 100%; |
|---|
| | | height: auto; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tips { |
|---|
| | | color: #67c23a; |
|---|
| | | font-size: 14px; |
|---|
| | | line-height: 40px; |
|---|
| | | text-align: center; |
|---|
| | | background-color: #f0f9eb; |
|---|
| | | height: 0; |
|---|
| | | opacity: 0; |
|---|
| | | transform: translateY(-100%); |
|---|
| | | transition: all 0.3s; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tips-ani { |
|---|
| | | transform: translateY(0); |
|---|
| | | height: 40px; |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | width: 100%; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .list-picture { |
|---|
| | | width: 100%; |
|---|
| | | height: 145px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .thumb-image { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .ellipsis { |
|---|
| | | display: flex; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-ellipsis-1 { |
|---|
| | | overflow: hidden; |
|---|
| | | white-space: nowrap; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-ellipsis-2 { |
|---|
| | | overflow: hidden; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | display: -webkit-box; |
|---|
| | | -webkit-line-clamp: 2; |
|---|
| | | -webkit-box-orient: vertical; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .customcss { |
|---|
| | | display: flex; |
|---|
| | | position: fixed; |
|---|
| | | width: 100%; |
|---|
| | | top: 10px; |
|---|
| | | text-align: center; |
|---|
| | | z-index: 999; |
|---|
| | | left: 30px; |
|---|
| | | height: 20%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .footer { |
|---|
| | | padding-top: 50%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"> |
|---|
| | | </uni-segmented-control> |
|---|
| | | <view class="content"> |
|---|
| | | <view v-if="current === 0" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms style="margin-left: 2%;margin-top: 20px;" label-width="180"> |
|---|
| | | <uni-forms-item :label="label" style="margin-top: -20px;"></uni-forms-item> |
|---|
| | | <uni-forms-item label="ç©æç ï¼" style="margin-top: -20px;"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«æç©æç " ref='midInput' :focus="!focus" |
|---|
| | | v-model="materSn" @input="snInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-list> |
|---|
| | | <uni-list-item direction="column" v-for="(item,index) in matInfos" :key="index"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <!-- <view class="uni-title-sub uni-ellipsis-2">éè´åå·ï¼{{item.purchaseOrderNo}}</view> --> |
|---|
| | | <view>ç©æç¼ç ï¼{{item.materielCode}}</view> |
|---|
| | | <view>æ¹æ¬¡å·ï¼{{item.lotNo}}</view> |
|---|
| | | <view>æ°éï¼{{item.quantity}}</view> |
|---|
| | | <!-- <view class="uni-note">ç产æ¥æï¼{{item.productionDate}}</view> |
|---|
| | | <view class="uni-note">æææï¼{{item.effectiveDate}}</view> --> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="submit" type="primary" size="default" style="margin-top: 2%;">确认åºåº</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="current === 1" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-list :border="true"> |
|---|
| | | <uni-list-item direction="column" v-for="(item,index) in orderInfo" :key="index"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view>åæ®å·ï¼{{orderNo}}</view> |
|---|
| | | <view>ç©æç¼ç ï¼{{item.materielCode}}</view> |
|---|
| | | <view>ç©æå称ï¼{{item.materielName}}</view> |
|---|
| | | <view>æ°éï¼{{item.orderQuantity+item.unit}}</view> |
|---|
| | | <view>åºåºæ°éï¼{{item.orderQuantity+item.unit}}</view> |
|---|
| | | <view>å·²åºæ°éï¼{{item.overOutQuantity+item.unit}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <u-toast ref="uToast" /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const innerAudioContext = uni.createInnerAudioContext(); |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | items: ['ç©æä¿¡æ¯', 'åæ®ä¿¡æ¯'], |
|---|
| | | current: 0, |
|---|
| | | matInfos: [], |
|---|
| | | orderNo: "", |
|---|
| | | label: "", |
|---|
| | | orderInfo: [], |
|---|
| | | focus: false, |
|---|
| | | materSn: "", |
|---|
| | | sn: "", |
|---|
| | | warehouseId: "", |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onShow() {}, |
|---|
| | | onLoad(res) { |
|---|
| | | this.focus = false; |
|---|
| | | this.orderNo = res.orderNo; |
|---|
| | | this.warehouseId = res.warehouseId; |
|---|
| | | this.label = "åæ®ç¼å·ï¼" + this.orderNo; |
|---|
| | | this.getData(); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // voiceSpeech(src) { |
|---|
| | | // innerAudioContext.src = src; // '../../static/success.mp3'; |
|---|
| | | // innerAudioContext.play(); |
|---|
| | | // }, |
|---|
| | | getData() { |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | orderNo: this.orderNo |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | this.$u.post('/api/OutboundOrderDetail/GetOutboundOrderDetails', postData).then((res) => { |
|---|
| | | if (res.status) { |
|---|
| | | this.orderInfo = res.data; |
|---|
| | | if (this.orderInfo.length > 3) { |
|---|
| | | this.loadVisible = true; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | onClickItem(e) { |
|---|
| | | this.focus = false; |
|---|
| | | if (this.current !== e.currentIndex) { |
|---|
| | | this.current = e.currentIndex; |
|---|
| | | if (this.current == 2) { |
|---|
| | | this.getData(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | //æ«ç |
|---|
| | | snInput() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | if (this.materSn != "") { |
|---|
| | | this.focus = true; |
|---|
| | | var matSn = this.materSn; |
|---|
| | | setTimeout(() => { |
|---|
| | | this.materSn = ""; |
|---|
| | | }, 10); |
|---|
| | | this.$u.post('/api/MaterielInfo/CodeAnalysis?serNum=' + matSn, {}).then((res) => { |
|---|
| | | this.Testcheck = false; |
|---|
| | | if (res.status) { |
|---|
| | | this.matInfos = []; |
|---|
| | | this.sn = res.data.serialNumber; |
|---|
| | | this.matInfos.push(res.data); |
|---|
| | | if (!res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/fail.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/success.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | } else { |
|---|
| | | this.matInfos = []; |
|---|
| | | this.sns = []; |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/fail.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | submit() { |
|---|
| | | if (this.sn == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«æç©æç ", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | debugger |
|---|
| | | this.$u.post('/api/OutboundOrder/outpinku', { |
|---|
| | | MainData: { |
|---|
| | | "orderNo": this.orderNo, |
|---|
| | | "sn": this.sn, |
|---|
| | | "warehouseId": this.warehouseId |
|---|
| | | } |
|---|
| | | }).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "åºåºæå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | this.focus = false; |
|---|
| | | this.matInfos = []; |
|---|
| | | this.sn = ""; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '@/common/uni-ui.scss'; |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | display: flex; |
|---|
| | | height: 150px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content-text { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .itemstyle { |
|---|
| | | margin-top: 30px; |
|---|
| | | margin-left: 5%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .headerstyle { |
|---|
| | | width: 90%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"> |
|---|
| | | </uni-segmented-control> |
|---|
| | | <view class="content"> |
|---|
| | | <view v-if="current === 0" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="120"> |
|---|
| | | <uni-forms-item label="æçæ¡ç "> |
|---|
| | | <uni-easyinput type="text" :focus="!istrue" v-model="barcode" placeholder="请æ«ææçæ¡ç " |
|---|
| | | ref='midInput' @input="inputChangebarcode()" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="picking" type="primary" style="margin-left: 0px;">æ£éå®æ</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | <uni-list> |
|---|
| | | <uni-list-item direction="column" v-for="item in matInfos" :key="item.palletCode"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <!-- <uni-icons type="trash" size="22" style="position: absolute;right: 5%;" |
|---|
| | | @click="deleteList(item.sn)"> |
|---|
| | | </uni-icons> --> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view>åæ®ç¼å·ï¼{{item.orderNo}}</view> |
|---|
| | | <view>æçç¼å·ï¼{{item.palletCode}}</view> |
|---|
| | | <view>ç©ææ¹æ¬¡ï¼{{item.batchNo}}</view> |
|---|
| | | <view>ç©æç¼ç ï¼{{item.materielCode}}</view> |
|---|
| | | <view>ç©æå称ï¼{{item.materielName}}</view> |
|---|
| | | <view>åæ®æ°éï¼{{item.orderQuantity}}</view> |
|---|
| | | <view>åå§åºåï¼{{item.originalQuantity}}</view> |
|---|
| | | <view>åé
åºåï¼{{item.assignQuantity}}</view> |
|---|
| | | <view>å©ä½åºåï¼{{item.originalQuantity-item.assignQuantity}}</view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="current === 2" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="120"> |
|---|
| | | <uni-forms-item label="æçæ¡ç "> |
|---|
| | | <uni-easyinput type="text" :focus="!istrue2" v-model="barcode2" placeholder="请æ«ææçæ¡ç " |
|---|
| | | ref='midInput' @input="inputChangebarcode2()" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item label="å
ç®±æ ç¾"> |
|---|
| | | <uni-easyinput type="text" @input="inputChange2()" v-model="innerboxcode" |
|---|
| | | placeholder="请æ«æå
ç®±æ ç¾" ref='midInput' :focus="istrue2" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="submit" type="primary" size="default" style="margin-top: 2%;">ç»ç</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="current === 1" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="120"> |
|---|
| | | <uni-forms-item label="æçæ¡ç "> |
|---|
| | | <uni-easyinput type="text" :focus="!addressFocus" v-model="inboundBarcode" |
|---|
| | | placeholder="请æ«ææçæ¡ç " ref='midInput' @input="inputChangebarcode3" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item label="å°åæ¡ç "> |
|---|
| | | <uni-easyinput type="text" v-model="address" :disabled = "addressdisabled" placeholder="请æ«æå°åæ¡ç " ref='midInput' |
|---|
| | | :focus="addressFocus" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="inbound" type="primary" size="default" style="margin-top: 2%;">å
¥åºç¡®è®¤</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | </view> |
|---|
| | | <view> |
|---|
| | | <uni-list> |
|---|
| | | <uni-list-item direction="column" v-if="inboundBarcode"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">æ»æ°éï¼{{Summmary}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | <uni-list-item direction="column" v-for="(item,index) in stockInfoDetail" :key="index"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">ç©æç¼å·ï¼{{item.materielCode}}</view> |
|---|
| | | <view class="uni-note">ç©æå称ï¼{{item.materielName}}</view> |
|---|
| | | <view class="uni-note">ç©ææ¹æ¬¡ï¼{{item.batchNo}}</view> |
|---|
| | | <view class="uni-note">åºåæ°éï¼{{item.stockQuantity}}</view> |
|---|
| | | <view class="uni-note">åºåºæ°éï¼{{item.outboundQuantity}}</view> |
|---|
| | | <view class="uni-note">ç产æ¥æï¼{{item.productionDate}}</view> |
|---|
| | | <view class="uni-note">æ æ æï¼{{item.effectiveDate}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <u-toast ref="uToast" /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | // const SixUniTts = uni.requireNativePlugin("SmallSix-SixUniTts") |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | items: ['æ£é', 'å
¥åº'], //'æ£éç»ç', |
|---|
| | | current: 0, |
|---|
| | | isPicking: false, |
|---|
| | | istrue: false, |
|---|
| | | matInfos: [], |
|---|
| | | barcode: '', |
|---|
| | | materialsns: "", |
|---|
| | | boxBarcodes: [], |
|---|
| | | sns: [], |
|---|
| | | barcodefocus: true, |
|---|
| | | totalNum: 0, |
|---|
| | | pickNum: 0, |
|---|
| | | num: 0, |
|---|
| | | orderTotalNum: 0, |
|---|
| | | orderPickNum: 0, |
|---|
| | | orderNo: "", |
|---|
| | | matTotal: [], |
|---|
| | | istrue2: false, |
|---|
| | | barcode2: '', |
|---|
| | | innerboxcode: "", |
|---|
| | | sns2: [], |
|---|
| | | barcodefocus: true, |
|---|
| | | addressFocus: false, |
|---|
| | | inboundBarcode: "", |
|---|
| | | address: "", |
|---|
| | | warehouseId: 0, |
|---|
| | | Summmary: 0, |
|---|
| | | stockInfoDetail: [], |
|---|
| | | addressdisabled: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onLoad(res) { |
|---|
| | | this.barcodefocus = false; |
|---|
| | | this.warehouseId = res.warehouseId; |
|---|
| | | if (this.warehouseId == 5) { |
|---|
| | | this.address = "8005" |
|---|
| | | }else if (this.warehouseId == 3) { |
|---|
| | | this.address = "1011"; |
|---|
| | | this.addressdisabled = true; |
|---|
| | | } |
|---|
| | | this.istrue = false; |
|---|
| | | this.addressFocus = false; |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | onClickItem(e) { |
|---|
| | | this.barcodeFo = true; |
|---|
| | | this.focus = false; |
|---|
| | | this.addressFocus = false; |
|---|
| | | if (this.current !== e.currentIndex) { |
|---|
| | | this.current = e.currentIndex; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | inbound() { |
|---|
| | | if (this.inboundBarcode == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«ææçæ¡ç ", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.address == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«æå°åæ¡ç ", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | "barcode": this.inboundBarcode, |
|---|
| | | "startPoint": this.address, |
|---|
| | | "warehouseId": this.warehouseId |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.$u.post('/api/Task/RequestInboundTask', postData).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | uni.$showMsg(res.message); |
|---|
| | | this.inboundBarcode = ""; |
|---|
| | | setTimeout(() => { |
|---|
| | | this.addressFocus = false; |
|---|
| | | }, 200); |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }).catch(err => { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: err.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | inputChangebarcode3() { |
|---|
| | | this.addressFocus = false; |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.inboundBarcode != '') { |
|---|
| | | this.addressFocus = true; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.inboundBarcode != '') { |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | "barcode": this.inboundBarcode, |
|---|
| | | "warehouseId": this.warehouseId, |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | this.$u.post('/api/StockInfo/StockQueryData', postData).then(res => { |
|---|
| | | // this.stockInfo = []; |
|---|
| | | this.stockInfoDetail = []; |
|---|
| | | if (res.status) { |
|---|
| | | // this.stockInfo = res.data, |
|---|
| | | this.stockInfoDetail = res.data.details |
|---|
| | | //è·åæ»æ°é |
|---|
| | | this.stockInfoDetail.forEach(item => { |
|---|
| | | this.Summmary+= item.stockQuantity; |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | // title: "æªæ¾å°æçä¿¡æ¯", |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | picking() { |
|---|
| | | if (this.barcode == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«ææçæ¡ç ", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.$u.post('/api/OutStockLockInfo/MaterialPick?palletCode=' + this.barcode, {}).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | // if(this.warehouseId==5){ |
|---|
| | | // this.Finish("8005"); |
|---|
| | | // } |
|---|
| | | |
|---|
| | | uni.$showMsg('æ£éæå!') |
|---|
| | | this.barcode = ""; |
|---|
| | | this.matInfos = []; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | Finish(code) { |
|---|
| | | this.$u.post('http://127.0.0.1:9291/api/CTU_AGV/PutFinish?&code=' + code).then( |
|---|
| | | res => { |
|---|
| | | if (res.status) { |
|---|
| | | // this.$refs.uToast.show({ |
|---|
| | | // title: "å®ææå", |
|---|
| | | // type: "success" |
|---|
| | | // }) |
|---|
| | | // this.barcode = ""; |
|---|
| | | } else { |
|---|
| | | // this.$refs.uToast.show({ |
|---|
| | | // title: res.message, |
|---|
| | | // type: "error" |
|---|
| | | // }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | inputChange(e) { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.istrue = false; |
|---|
| | | var matInfo = this.materialsns.split('|'); |
|---|
| | | if (matInfo.length == 7) { |
|---|
| | | var matObj = { |
|---|
| | | matCode: matInfo[1], |
|---|
| | | matProductionDate: matInfo[3], |
|---|
| | | matQty: matInfo[5], |
|---|
| | | orderNo: matInfo[6], |
|---|
| | | sn: this.materialsns, |
|---|
| | | isPicking: this.isPicking |
|---|
| | | } |
|---|
| | | var temp = this.boxBarcodes.find(x => x.orderNo == matObj.orderNo); |
|---|
| | | if (!temp) { |
|---|
| | | var tmp = this.matTotal.find(x => x.matCode == matObj.matCode); |
|---|
| | | if (!tmp) { |
|---|
| | | this.matTotal.push({ |
|---|
| | | matCode: matObj.matCode, |
|---|
| | | matQuantity: parseInt(matObj.matQty) |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | tmp.matQuantity += parseInt(matObj.matQty); |
|---|
| | | } |
|---|
| | | this.sns.push({ |
|---|
| | | innerboxcode: this.materialsns, |
|---|
| | | isSplit: this.isPicking |
|---|
| | | }); |
|---|
| | | this.boxBarcodes.push(matObj); |
|---|
| | | this.isPicking = false; |
|---|
| | | setTimeout(this.updateFocus, 100); |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "æ«ç éå¤", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | setTimeout(this.updateFocus, 100); |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "æ«ç é误,请æ«ææ£ç¡®å
ç®±ç ", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | setTimeout(this.updateFocus, 100); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | checkedClick() { |
|---|
| | | this.isPicking = !this.isPicking; |
|---|
| | | this.istrue = false; |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.barcode != '') { |
|---|
| | | this.istrue = true; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | updateFocus() { |
|---|
| | | this.materialsns = ''; |
|---|
| | | if (!this.istrue) { |
|---|
| | | this.istrue = true; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | inputChangebarcode() { |
|---|
| | | this.boxBarcodes = []; |
|---|
| | | this.istrue = false; |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.barcode != '') { |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | "barcode": this.barcode, |
|---|
| | | "warehouseId": this.warehouseId, |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | this.$u.post('/api/OutStockLockInfo/GetStockOutboundOrder', postData).then(res => { |
|---|
| | | this.matInfos = []; |
|---|
| | | if (res != null) { |
|---|
| | | this.matInfos = res |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "æªæ¾å°æ£éä¿¡æ¯", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.istrue = true; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | deleteList(res) { |
|---|
| | | this.matTotal.map((item, index) => { |
|---|
| | | var temp = this.boxBarcodes.find(x => x.sn == res); |
|---|
| | | if (temp) { |
|---|
| | | if (item.matCode == temp.matCode) { |
|---|
| | | if (item.matQuantity - temp.matQty == 0) { |
|---|
| | | this.matTotal.splice(index, 1); |
|---|
| | | } else { |
|---|
| | | item.matQuantity -= temp.matQty; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.sns.map((item, index) => { |
|---|
| | | if (item.innerboxcode == res) { |
|---|
| | | this.sns.splice(index, 1); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.boxBarcodes.map((item, index) => { |
|---|
| | | if (item.sn == res) { |
|---|
| | | this.boxBarcodes.splice(index, 1); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | submit() { |
|---|
| | | if (this.barcode2 == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«ææçæ¡ç ", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.innerboxcode == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«æå
ç®±æ ç¾", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.$u.post('/api/StockOperate/PickingBoxing', { |
|---|
| | | MainData: { |
|---|
| | | "barcode": this.barcode2, |
|---|
| | | "innerboxcode": this.innerboxcode |
|---|
| | | }, |
|---|
| | | DelKeys: this.sns2 |
|---|
| | | }).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | uni.$showMsg('ç»çæå!') |
|---|
| | | this.barcode2 = ""; |
|---|
| | | this.innerboxcode = ""; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }).catch(err => { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: err.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | inputChange2(e) { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | inputChangebarcode2() { |
|---|
| | | this.istrue2 = false; |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.barcode2 != '') { |
|---|
| | | this.istrue2 = true; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '@/common/uni-ui.scss'; |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | display: flex; |
|---|
| | | height: 150px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content-text { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .itemstyle { |
|---|
| | | margin-top: 20px; |
|---|
| | | margin-left: 5%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .headerstyle { |
|---|
| | | width: 90%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"> |
|---|
| | | </uni-segmented-control> |
|---|
| | | <view class="content"> |
|---|
| | | <view v-if="current === 0" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="180"> |
|---|
| | | <uni-forms-item :label="label"> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item label="æçæ¡ç :"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«ææçæ¡ç " ref='midInput' :focus="!focus" |
|---|
| | | v-model="barcode" @confirm="barcodeInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item label="å
ç®±æ ç¾:"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«æå
ç®±æ ç¾" ref='midInput' :focus="focus" |
|---|
| | | v-model="materSn" @confirm="snInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | |
|---|
| | | <uni-forms-item :label="Testlabel" v-if="Test"> |
|---|
| | | <uni-easyinput type="text" :placeholder="Testplaceholder" ref='midInput' |
|---|
| | | v-model="Initiallife" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | |
|---|
| | | <!-- <uni-forms-item> |
|---|
| | | <checkbox checked="check">æ¯å¦æ»¡ç</checkbox> |
|---|
| | | </uni-forms-item> --> |
|---|
| | | <uni-forms-item> |
|---|
| | | <view style="display: flex;justify-content: space-around;margin-top: 2%;"> |
|---|
| | | <button @click="reset" type="default" size="default" |
|---|
| | | style="width: 160rpx;border: 1rpx solid #007aff;color: #007aff;">éç½®</button> |
|---|
| | | <button @click="submit" type="primary" size="default" style="width: 160rpx;">ç»ç</button> |
|---|
| | | </view> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | <uni-list> |
|---|
| | | <!-- <uni-list-item direction="column" v-for="item in matTotal" :key="item.matCode"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">ç©æç¼ç ï¼{{item.matCode}}</view> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">æ°éï¼{{item.matQuantity}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> --> |
|---|
| | | <uni-list-item direction="column" v-for="(item,index) in matInfos" :key="index"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <uni-icons type="trash" size="22" style="position: absolute;right: 5%;" |
|---|
| | | @click="deleteList(index)"> |
|---|
| | | </uni-icons> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">éè´åå·ï¼{{item.purchaseOrderNo}}</view> |
|---|
| | | <view class="uni-note">ç©æç¼ç ï¼{{item.materielCode}}</view> |
|---|
| | | <view class="uni-note">æ¹æ¬¡å·ï¼{{item.lotNo}}</view> |
|---|
| | | <view class="uni-note">æ°éï¼{{item.quantity}}</view> |
|---|
| | | <view class="uni-note">ç产æ¥æï¼{{item.productionDate}}</view> |
|---|
| | | <view class="uni-note">æææï¼{{item.effectiveDate}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="current === 1" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="120"> |
|---|
| | | <uni-forms-item label="æçæ¡ç "> |
|---|
| | | <uni-easyinput type="text" :focus="!addressFocus" v-model="inboundBarcode" |
|---|
| | | placeholder="请æ«ææçæ¡ç " ref='midInput' @confirm="inputChangebarcode" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item label="å°åæ¡ç "> |
|---|
| | | <uni-easyinput type="text" v-model="address" :disabled="addressdisabled" |
|---|
| | | placeholder="请æ«æå°åæ¡ç " ref='midInput' :focus="addressFocus" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="inbound" type="primary" size="default" style="margin-top: 2%;">å
¥åºç¡®è®¤</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="current === 2" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-list :border="true"> |
|---|
| | | <uni-list-item direction="column" v-for="(item,index) in orderInfo" :key="index"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view style="font-size: 18px;">åæ®å·ï¼{{orderNo}}</view> |
|---|
| | | <view style="font-size: 18px;">ç©æç¼ç ï¼{{item.materielCode}}</view> |
|---|
| | | <view>ç©æå称ï¼{{item.materielName}}</view> |
|---|
| | | <!-- <view>ç©æè§æ ¼ï¼{{item.materielSpec}}</view> --> |
|---|
| | | <!-- <view style="font-size: 18px;">ç©æå称ï¼{{item.matName}}</view> --> |
|---|
| | | <view style="font-size: 18px;">æ°éï¼{{item.orderQuantity}}</view> |
|---|
| | | <view style="font-size: 18px;">ç»çæ°éï¼{{item.receiptQuantity}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="current === 3" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="180"> |
|---|
| | | <uni-forms-item label="å
ç®±æ ç¾:"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«æå
ç®±æ ç¾" ref='midInput' :focus="!pkfocus" |
|---|
| | | v-model="pkmaterSn" @confirm="pksnInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | |
|---|
| | | <uni-forms-item> |
|---|
| | | <view style="display: flex;justify-content: space-around;margin-top: 2%;"> |
|---|
| | | <button @click="resetInPk" type="default" size="default" |
|---|
| | | style="width: 160rpx;border: 1rpx solid #007aff;color: #007aff;">éç½®</button> |
|---|
| | | <button @click="pksubmit" type="primary" size="default" |
|---|
| | | style="margin-top: 2%;">å
¥å¹³åº</button> |
|---|
| | | </view> |
|---|
| | | </uni-forms-item> |
|---|
| | | |
|---|
| | | </uni-forms> |
|---|
| | | <uni-list> |
|---|
| | | <uni-list-item direction="column" v-for="(item,index) in pkmatInfos" :key="index"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <uni-icons type="trash" size="22" style="position: absolute;right: 5%;" |
|---|
| | | @click="pkdeleteList(index)"> |
|---|
| | | </uni-icons> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">éè´åå·ï¼{{item.purchaseOrderNo}}</view> |
|---|
| | | <view class="uni-note">ç©æç¼ç ï¼{{item.materielCode}}</view> |
|---|
| | | <view class="uni-note">æ¹æ¬¡å·ï¼{{item.lotNo}}</view> |
|---|
| | | <view class="uni-note">æ°éï¼{{item.quantity}}</view> |
|---|
| | | <view class="uni-note">ç产æ¥æï¼{{item.productionDate}}</view> |
|---|
| | | <view class="uni-note">æææï¼{{item.effectiveDate}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <u-toast ref="uToast" /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const innerAudioContext = uni.createInnerAudioContext(); |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | items: ['ç»ç', 'å
¥åº', 'åæ®ä¿¡æ¯'], //, '解ç' |
|---|
| | | current: 0, |
|---|
| | | matTotal: [], |
|---|
| | | matInfos: [], |
|---|
| | | orderNo: "", |
|---|
| | | label: "", |
|---|
| | | orderInfo: [], |
|---|
| | | focus: false, |
|---|
| | | pkfocus: false, |
|---|
| | | barcode: "", |
|---|
| | | materSn: "", |
|---|
| | | Initiallife: 1000, |
|---|
| | | sns: [], |
|---|
| | | pksns: [], |
|---|
| | | addressFocus: false, |
|---|
| | | inboundBarcode: "", |
|---|
| | | address: "", |
|---|
| | | check: true, |
|---|
| | | value: "", |
|---|
| | | matInfo: [], |
|---|
| | | value2: "", |
|---|
| | | matTotals: [], |
|---|
| | | warehouseId: "", |
|---|
| | | Test: false, |
|---|
| | | Testlabel: "", |
|---|
| | | Testplaceholder: "", |
|---|
| | | Testcheck: false, |
|---|
| | | pkmaterSn: "", |
|---|
| | | pkmatInfos: [], |
|---|
| | | addressdisabled: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onShow() {}, |
|---|
| | | onLoad(res) { |
|---|
| | | this.focus = false; |
|---|
| | | this.addressFocus = false; |
|---|
| | | this.orderNo = res.orderNo; |
|---|
| | | this.warehouseId = res.warehouseId; |
|---|
| | | if (this.warehouseId == 6) { //æµè¯æ¶ä»åºåºID |
|---|
| | | this.Test = true; |
|---|
| | | this.Testlabel = "åå§å¯¿å½:"; |
|---|
| | | this.Testplaceholder = "请è¾å
¥åå§å¯¿å½"; |
|---|
| | | } else if (this.warehouseId == 2) { //油墨ä»åºåºID |
|---|
| | | this.Test = true; |
|---|
| | | this.Testlabel = "æ°é:"; |
|---|
| | | this.Testplaceholder = "请è¾å
¥æ°é"; |
|---|
| | | this.Initiallife = 16; |
|---|
| | | } else if (this.warehouseId == 5) { //è¾
æ |
|---|
| | | this.items.push("å
¥å¹³åº"); |
|---|
| | | this.items[1] = "å
¥ç«åº"; |
|---|
| | | this.address = "8005"; |
|---|
| | | } else if (this.warehouseId == 3) { //è¾
æ |
|---|
| | | this.address = "1011"; |
|---|
| | | this.addressdisabled = true; |
|---|
| | | } |
|---|
| | | this.label = "åæ®ç¼å·ï¼" + this.orderNo; |
|---|
| | | this.getData(); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // voiceSpeech(src) { |
|---|
| | | // innerAudioContext.src = src; // '../../static/success.mp3'; |
|---|
| | | // innerAudioContext.play(); |
|---|
| | | // }, |
|---|
| | | updateFocus() { |
|---|
| | | debugger |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.materSn = ''; |
|---|
| | | if (!this.focus) { |
|---|
| | | this.focus = true; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | barcodeFocus() { |
|---|
| | | debugger |
|---|
| | | this.barcode = ''; |
|---|
| | | if (this.focus) { |
|---|
| | | this.focus = false; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | getData() { |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | orderNo: this.orderNo |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | this.$u.post('/api/InboundOrderDetail/GetInboundOrderDetails', postData).then((res) => { |
|---|
| | | if (res.status) { |
|---|
| | | this.orderInfo = res.data; |
|---|
| | | if (this.orderInfo.length > 3) { |
|---|
| | | this.loadVisible = true; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | onClickItem(e) { |
|---|
| | | this.focus = false; |
|---|
| | | this.addressFocus = false; |
|---|
| | | if (this.current !== e.currentIndex) { |
|---|
| | | this.current = e.currentIndex; |
|---|
| | | if (this.current == 2) { |
|---|
| | | this.getData(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | barcodeInput() { |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.barcode.length > 0) { |
|---|
| | | // if (this.barcode.substring(0, 1) == 'A' || this.barcode.substring(0, 2) == 'TP') { |
|---|
| | | this.focus = true; |
|---|
| | | // } else { |
|---|
| | | // this.$refs.uToast.show({ |
|---|
| | | // title: "æ«ç é误,请æ«ææçç ", |
|---|
| | | // type: "error" |
|---|
| | | // }) |
|---|
| | | // } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | snInput() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | if (this.materSn != "") { |
|---|
| | | this.focus = false; |
|---|
| | | var matSn = this.materSn; |
|---|
| | | if (this.warehouseId == 11) { |
|---|
| | | matSn = matSn.replace(/,SC.*/, ''); |
|---|
| | | } |
|---|
| | | //æ¥è¯¢matSnæ¯å¦åå¨å符 |
|---|
| | | if(matSn.indexOf("POHA")>0){ |
|---|
| | | this.$u.post('/api/MaterielInfo/CodeAnalysis?serNum=' + matSn, {}).then((res) => { |
|---|
| | | this.Testcheck = false; |
|---|
| | | if (res.status) { |
|---|
| | | this.sns.push(res.data.serialNumber); |
|---|
| | | |
|---|
| | | this.matInfos.push(res.data); |
|---|
| | | if (res.message) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/fail.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/success.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/fail.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | setTimeout(() => { |
|---|
| | | this.materSn = ""; |
|---|
| | | }, 100); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | pksnInput() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | if (this.pkmaterSn != "") { |
|---|
| | | |
|---|
| | | var matSn = this.pkmaterSn; |
|---|
| | | |
|---|
| | | if(matSn.indexOf("POHA")>0){ |
|---|
| | | this.$u.post('/api/MaterielInfo/CodeAnalysis?serNum=' + matSn, {}).then((res) => { |
|---|
| | | if (res.status) { |
|---|
| | | this.pksns.push(res.data.serialNumber); |
|---|
| | | this.pkmatInfos.push(res.data); |
|---|
| | | if (!res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/fail.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/success.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | return; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/fail.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | setTimeout(() => { |
|---|
| | | this.pkmaterSn = ""; |
|---|
| | | }, 100); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | inbound() { |
|---|
| | | if (this.inboundBarcode == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«ææçæ¡ç ", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.address == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«æå°åæ¡ç ", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | "barcode": this.inboundBarcode, |
|---|
| | | "startPoint": this.address, |
|---|
| | | "warehouseId": this.warehouseId |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.$u.post('/api/Task/RequestInboundTask', postData).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.inboundBarcode = ""; |
|---|
| | | if (this.warehouseId != 5) this.address = ""; |
|---|
| | | setTimeout(() => { |
|---|
| | | this.addressFocus = false; |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "æå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | }, 200); |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }).catch(err => { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: err.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | inputChangebarcode() { |
|---|
| | | this.addressFocus = false; |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.inboundBarcode != '') { |
|---|
| | | this.addressFocus = true; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | deleteList(res) { |
|---|
| | | this.matInfos.splice(res, 1); |
|---|
| | | this.sns.splice(res, 1); |
|---|
| | | }, |
|---|
| | | pkdeleteList(res) { |
|---|
| | | this.pkmatInfos.splice(res, 1); |
|---|
| | | this.pksns.splice(res, 1); |
|---|
| | | }, |
|---|
| | | reset() { |
|---|
| | | this.barcode = ""; |
|---|
| | | this.matInfos = []; |
|---|
| | | this.sns = []; |
|---|
| | | this.materSn = ""; |
|---|
| | | if (this.warehouseId = !6) { |
|---|
| | | this.Initiallife = 0; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | resetInPk() { |
|---|
| | | this.pkmaterSn = ""; |
|---|
| | | this.pkfocus = false; |
|---|
| | | this.pkmatInfos = []; |
|---|
| | | this.pksns = []; |
|---|
| | | }, |
|---|
| | | pksubmit() { |
|---|
| | | if (this.pkmatInfos.length == 0) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«æå
ç®±æ ç¾", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.$u.post('/api/InboundOrder/InPinKu?warehouseId=' + this.warehouseId + "&orderNo=" + this.orderNo, this |
|---|
| | | .pksns).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "å
¥åºæå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | this.pkfocus = false; |
|---|
| | | this.pkmatInfos = []; |
|---|
| | | this.pksns = []; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | submit() { |
|---|
| | | if (this.barcode == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«ææçæ¡ç ", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.matInfos.length == 0) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«æå
ç®±æ ç¾", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.Test) { |
|---|
| | | if (!this.Testcheck) { |
|---|
| | | this.Testcheck = true; |
|---|
| | | if (this.warehouseId == 2) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请确认æ°é", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | } else if (this.warehouseId == 6) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请确认åå§å¯¿å½", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (this.warehouseId == 2) { //油墨ä»åºåºID |
|---|
| | | this.sn = this.sns[0]; |
|---|
| | | for (var i = 0; i < this.Initiallife - 1; i++) { |
|---|
| | | this.sns.push(this.sn); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.$u.post('/api/InboundOrder/MaterielGroup', { |
|---|
| | | MainData: { |
|---|
| | | "palletCode": this.barcode, |
|---|
| | | "orderNo": this.orderNo, |
|---|
| | | "initiallife": this.Initiallife, |
|---|
| | | // "isFull": this.check |
|---|
| | | "warehouseId": this.warehouseId |
|---|
| | | }, |
|---|
| | | DelKeys: this.sns |
|---|
| | | }).then(res => { |
|---|
| | | this.Testcheck = false; |
|---|
| | | if (res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "ç»çæå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | this.focus = false; |
|---|
| | | this.barcode = ""; |
|---|
| | | this.matInfos = []; |
|---|
| | | this.sns = []; |
|---|
| | | this.matTotal = []; |
|---|
| | | if (this.warehouseId != 6) { //æµè¯æ¶ä»åºåºID |
|---|
| | | this.Initiallife = ""; |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '@/common/uni-ui.scss'; |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | display: flex; |
|---|
| | | height: 150px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content-text { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .itemstyle { |
|---|
| | | margin-top: 30px; |
|---|
| | | margin-left: 5%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .headerstyle { |
|---|
| | | width: 90%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <u-sticky> |
|---|
| | | <view style="background-color: #ffffff;"> |
|---|
| | | <uni-search-bar @confirm="search" v-model="searchValue"></uni-search-bar> |
|---|
| | | </view> |
|---|
| | | </u-sticky> |
|---|
| | | <uni-list :border="true"> |
|---|
| | | <uni-list-item direction="column" clickable @click="groupClick(item.receiveOrderNo)" link |
|---|
| | | :to="page+item.receiveOrderNo+'&receiveOrderId='+item.receiveOrderId+'&warehouseId='+warehouseId" v-for="item in allReceivingOrders" |
|---|
| | | :key="item.receiveOrderNo"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <uni-group margin-top="20"> |
|---|
| | | <view style="line-height: 17px;color: #596671;font-size: 14px;text-align: center;display: flex;justify-content: space-between;"> |
|---|
| | | æ¶è´§åå· {{item.receiveOrderNo}} |
|---|
| | | </view> |
|---|
| | | <view style="margin-top: 10rpx;line-height: 17px;color: #596671;font-size: 14px;text-align: center;display: flex;justify-content: space-between;"> |
|---|
| | | ä¾åºåä»£å· {{item.suppliersId}} |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | style="margin-top: 10rpx;display: flex;align-items: center; "> |
|---|
| | | <view style="text-align: center;line-height: 40rpx;border-radius: 8rpx; width: 238rpx;height: 40rpx;font-size: 22rpx;background-color:rgba(22,127,247,0.18);color: #1F63FF;"> |
|---|
| | | 订åç¶æ {{item.ReceiveOrderStatus}} |
|---|
| | | </view> |
|---|
| | | <view style="text-align: center;line-height: 40rpx;border-radius: 8rpx; width: 158rpx;height: 40rpx;font-size: 22rpx;color: #F56C6C;"> |
|---|
| | | å·²æ¶æ°é {{item.SumQty}} |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </uni-group> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | |
|---|
| | | </uni-list> |
|---|
| | | <uni-load-more :status="status" v-if="loadVisible"></uni-load-more> |
|---|
| | | |
|---|
| | | <u-back-top :scroll-top="scrollTop" top="400"></u-back-top> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { ReceiveOrderStatus } from '../../common/config.js' |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | page: "/pages/stash/receiveorderoutbound?orderNo=", |
|---|
| | | loadVisible: false, |
|---|
| | | searchValue: "", |
|---|
| | | warehouseId: "", |
|---|
| | | status: "more", |
|---|
| | | allReceivingOrders: [], |
|---|
| | | pageNo: 1, |
|---|
| | | scrollTop: 0, |
|---|
| | | isLoaded:false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onLoad(res) { |
|---|
| | | this.warehouseId = res.warehouseId; |
|---|
| | | this.getData(); |
|---|
| | | this.isLoaded=true; |
|---|
| | | }, |
|---|
| | | onShow() { |
|---|
| | | if (this.isLoaded) { |
|---|
| | | // ä»å
¶ä»é¡µé¢è¿åæ¶å·æ° |
|---|
| | | this.getData(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onPageScroll(e) { |
|---|
| | | this.scrollTop = e.scrollTop; |
|---|
| | | }, |
|---|
| | | onReachBottom() { |
|---|
| | | this.pageNo += 1; |
|---|
| | | this.getData(); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | search(res) { |
|---|
| | | this.pageNo = 1; |
|---|
| | | this.getData(); |
|---|
| | | }, |
|---|
| | | groupClick() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | getData() { |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | orderNo: this.searchValue, |
|---|
| | | pageNo: this.pageNo, |
|---|
| | | warehouseId: this.warehouseId, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | this.$u.post('/api/ReceiveOrder/GetReceiveOrders', postData).then((res) => { |
|---|
| | | if (res.status) { |
|---|
| | | if (res.data.length > 0) { |
|---|
| | | if (this.searchValue == '') { |
|---|
| | | this.allReceivingOrders = res.data.map(i => ({ |
|---|
| | | ...i, |
|---|
| | | ReceiveOrderStatus: ReceiveOrderStatus.find(item => item.value == i |
|---|
| | | .receiveOrderStatus).label, |
|---|
| | | SumQty: i.details.map(item => item.receivedQuantity).reduce((prev, next) => prev + next, 0) |
|---|
| | | })) |
|---|
| | | // this.allReceivingOrders = res.data; |
|---|
| | | if (this.allReceivingOrders.length > 3) { |
|---|
| | | this.loadVisible = true; |
|---|
| | | } else { |
|---|
| | | this.loadVisible = false; |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | // this.allReceivingOrders = res.data; |
|---|
| | | if (postData.MainData.pageNo == 1) { |
|---|
| | | this.allReceivingOrders = []; |
|---|
| | | } |
|---|
| | | this.allReceivingOrders = this.allReceivingOrders.concat(res.data); |
|---|
| | | if (this.allReceivingOrders.length > 3) { |
|---|
| | | this.loadVisible = true; |
|---|
| | | } else { |
|---|
| | | this.loadVisible = false; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.status = 'noMore'; |
|---|
| | | //this.allReceivingOrders = []; |
|---|
| | | this.loadVisible = true; |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '@/common/uni-ui.scss'; |
|---|
| | | |
|---|
| | | page { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | box-sizing: border-box; |
|---|
| | | background-color: #efeff4; |
|---|
| | | min-height: 100%; |
|---|
| | | height: auto; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tips { |
|---|
| | | color: #67c23a; |
|---|
| | | font-size: 14px; |
|---|
| | | line-height: 40px; |
|---|
| | | text-align: center; |
|---|
| | | background-color: #f0f9eb; |
|---|
| | | height: 0; |
|---|
| | | opacity: 0; |
|---|
| | | transform: translateY(-100%); |
|---|
| | | transition: all 0.3s; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tips-ani { |
|---|
| | | transform: translateY(0); |
|---|
| | | height: 40px; |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | width: 100%; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .list-picture { |
|---|
| | | width: 100%; |
|---|
| | | height: 145px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .thumb-image { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .ellipsis { |
|---|
| | | display: flex; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-ellipsis-1 { |
|---|
| | | overflow: hidden; |
|---|
| | | white-space: nowrap; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-ellipsis-2 { |
|---|
| | | overflow: hidden; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | display: -webkit-box; |
|---|
| | | -webkit-line-clamp: 2; |
|---|
| | | -webkit-box-orient: vertical; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .customcss { |
|---|
| | | display: flex; |
|---|
| | | position: fixed; |
|---|
| | | width: 100%; |
|---|
| | | top: 10px; |
|---|
| | | text-align: center; |
|---|
| | | z-index: 999; |
|---|
| | | left: 30px; |
|---|
| | | height: 20%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .footer { |
|---|
| | | padding-top: 50%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"> |
|---|
| | | </uni-segmented-control> |
|---|
| | | <view v-if="current === 0" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms style="margin-left: 2%;margin-top: 20px;" label-width="180"> |
|---|
| | | <uni-forms-item :label="label" style="margin-top: -20px;"></uni-forms-item> |
|---|
| | | <!-- <uni-forms-item label="åæ®ç±»åï¼ç产é¢æå" style="margin-top: -20px;"></uni-forms-item> --> |
|---|
| | | <uni-forms-item label="å
ç®±ç ï¼" style="margin-top: -20px;"> |
|---|
| | | <uni-easyinput type="text" placeholder="请æ«æå
ç®±ç " ref='midInput' :focus="!focus" |
|---|
| | | v-model="innerCode" @confirm="innercodeInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item :label="PurchaseOrderNo" style="margin-top: -20px;"></uni-forms-item> |
|---|
| | | <uni-forms-item :label="matCode" style="margin-top: -20px;"></uni-forms-item> |
|---|
| | | <uni-forms-item :label="LotNo" style="margin-top: -20px;"></uni-forms-item> |
|---|
| | | <uni-forms-item :label="ProductionDate" style="margin-top: -20px;"></uni-forms-item> |
|---|
| | | <uni-forms-item :label="EffectiveDate" style="margin-top: -20px;"></uni-forms-item> |
|---|
| | | <uni-forms-item :label="orderQty" style="margin-top: -20px;"></uni-forms-item> |
|---|
| | | <uni-forms-item :label="remaindQty" style="margin-top: -20px;"> |
|---|
| | | <uni-easyinput type="text" placeholder="请è¾å
¥å®é
æ°é" v-model="Quantity" ref='midInput' /> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | <uni-forms-item> |
|---|
| | | <view class="uni-flex uni-row" style="justify-content: space-between;margin-top: 2%;height: 45px;width: 520rpx;margin: 0px auto;"> |
|---|
| | | <view> |
|---|
| | | <button @click="resetReceive" type="default" size="default" style="width: 200rpx;border: 1rpx solid #007aff;color: #007aff;">éç½®</button> |
|---|
| | | </view> |
|---|
| | | <view> |
|---|
| | | <button @click="submit" type="primary" size="default" style="width: 220rpx;">确认æ¶è´§</button> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item> |
|---|
| | | <view style="margin-top: 2%;height: 45px;width: 520rpx;margin: 0px auto;"> |
|---|
| | | <button @click="submit1" type="primary" size="default" style="margin-top: 2%;backgroundColor:#1AAD19;borderColor:#1AAD19">å®ææ¶è´§</button> |
|---|
| | | </view> |
|---|
| | | </uni-forms-item> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="current === 1" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <!-- <uni-forms label-width="180"> |
|---|
| | | <uni-forms-item label="åºå"> |
|---|
| | | <uni-data-select v-if="show" v-model="value" :localdata="range"></uni-data-select> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item label="楼å±"> |
|---|
| | | <uni-data-select v-if="show" v-model="floor" :localdata="floorrange"></uni-data-select> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item label="åºåºåºå"> |
|---|
| | | <uni-data-select v-if="show" v-model="endType" :localdata="endTypeRange"></uni-data-select> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> --> |
|---|
| | | <uni-list :border="true"> |
|---|
| | | <uni-list-item direction="column" v-for="item in orderinfoDetails" :key="item.id"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view>æ¶è´§åå·ï¼{{orderNo}}</view> |
|---|
| | | <view>éè´åå·ï¼{{item.purchaseOrderNo}}</view> |
|---|
| | | <view>ç©æç¼å·ï¼{{item.materielCode}}</view> |
|---|
| | | <view>ç©æå称ï¼{{item.materielName}}</view> |
|---|
| | | <view>ç©æè§æ ¼ï¼{{item.materielSpec}}</view> |
|---|
| | | <view>æ¹æ¬¡å·ï¼{{item.lotNo}}</view> |
|---|
| | | <view>æ¶è´§æ°éï¼{{item.receivedQuantity}}</view> |
|---|
| | | <view>æ¯å¦è´¨æ£ï¼{{item.ifInspection==1?"æ¯":"å¦"}}</view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | </view> |
|---|
| | | <view> |
|---|
| | | <!-- è¾å
¥æ¡ç¤ºä¾ --> |
|---|
| | | <uni-popup ref="inputDialog" type="dialog"> |
|---|
| | | <uni-popup-dialog ref="inputClose" mode="input" title="è¾å
¥å
容" :value="outNum" placeholder="请è¾å
¥å
容" |
|---|
| | | @confirm="outbound"></uni-popup-dialog> |
|---|
| | | </uni-popup> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="current === 2" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="120"> |
|---|
| | | <uni-forms-item label="楼å±"> |
|---|
| | | <uni-data-select v-if="show" v-model="printfloor" |
|---|
| | | :localdata="printfloorrange"></uni-data-select> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item label="å
ç®±æ ç¾"> |
|---|
| | | <uni-easyinput type="text" :focus="tagFocus" v-model="tag" placeholder="请æ«æå
ç®±æ ç¾" ref='midInput' |
|---|
| | | @input="tagInput" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item :label="tagmatCode"></uni-forms-item> |
|---|
| | | <uni-forms-item :label="tagmatName"></uni-forms-item> |
|---|
| | | <uni-forms-item :label="tagQty"></uni-forms-item> |
|---|
| | | <uni-forms-item label="æåæ°é"> |
|---|
| | | <uni-easyinput type="number" v-model="number" placeholder="请è¾å
¥æåæ°é" ref='midInput' |
|---|
| | | :focus="numberFocus" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="printTag" type="primary" size="default" style="margin-top: 2%;">æå°æ ç¾</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="current === 3" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="120"> |
|---|
| | | <uni-forms-item label="æçæ¡ç "> |
|---|
| | | <uni-easyinput type="text" :focus="!istrue" v-model="barcode" placeholder="请æ«ææçæ¡ç " |
|---|
| | | ref='midInput' @input="inputChangebarcode" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item label="å°åæ¡ç "> |
|---|
| | | <uni-easyinput type="text" v-model="address" placeholder="请æ«æå°åæ¡ç " ref='midInput' |
|---|
| | | :focus="istrue" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="inbound" type="primary" size="default" style="margin-top: 2%;">å
¥åº</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="current === 4" class="headerstyle"> |
|---|
| | | <view class="itemstyle"> |
|---|
| | | <uni-forms label-width="120"> |
|---|
| | | <uni-forms-item> |
|---|
| | | <uni-easyinput type="text" @input="releaseboxInput" v-model="releasevalue" placeholder="请æ«ç " |
|---|
| | | ref='midInput' :focus="releasefocus" /> |
|---|
| | | </uni-forms-item> |
|---|
| | | <uni-forms-item> |
|---|
| | | <button @click="releasebox" type="primary" size="default" style="margin-top: 2%;">解ç</button> |
|---|
| | | </uni-forms-item> |
|---|
| | | </uni-forms> |
|---|
| | | <uni-list> |
|---|
| | | <uni-list-item direction="column" v-if="value2"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">æçå·ï¼{{value2}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | <uni-list-item direction="column" v-for="item in matTotals" :key="item.matCode"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">ç©æç¼ç ï¼{{item.matCode}}</view> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2">æ°éï¼{{item.matQuantity}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | |
|---|
| | | <uni-list-item direction="column" v-for="(item,index) in matInfo" :key="index"> |
|---|
| | | <template v-slot:body> |
|---|
| | | <view class="uni-list-box"> |
|---|
| | | <view class="uni-content"> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2" style="font-size: 1.1em;"> |
|---|
| | | ç©æç¼ç ï¼{{item.matCode}} |
|---|
| | | </view> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2" style="font-size: 1.1em;"> |
|---|
| | | ç©æå称ï¼{{item.matName}} |
|---|
| | | </view> |
|---|
| | | <view class="uni-title-sub uni-ellipsis-2" style="font-size: 1.1em;"> |
|---|
| | | æ°éï¼{{item.matQty}} |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <u-toast ref="uToast" /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { |
|---|
| | | config |
|---|
| | | } from '../../common/config'; |
|---|
| | | import message from '../../tuniao-ui/libs/function/message'; |
|---|
| | | const innerAudioContext = uni.createInnerAudioContext(); |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | show: true, |
|---|
| | | items: ['æ«æ', 'æç»'], //, 'æå', 'å
¥åº', '解ç' |
|---|
| | | current: 0, |
|---|
| | | orderNo: "", |
|---|
| | | orderInfo: [], |
|---|
| | | orderinfoDetails:[], |
|---|
| | | label: "", |
|---|
| | | innerCode: "", |
|---|
| | | PurchaseOrderNo: "éè´åå·ï¼", |
|---|
| | | matCode: "ç©æç¼ç ï¼", |
|---|
| | | LotNo: "ç©ææ¹æ¬¡ï¼", |
|---|
| | | orderQty: "订åæ°éï¼", |
|---|
| | | Quantity: "", |
|---|
| | | ProductionDate: "ç产æ¥æï¼", |
|---|
| | | EffectiveDate: "æææ¥æï¼", |
|---|
| | | |
|---|
| | | matName: "ç©æå称ï¼", |
|---|
| | | currentQty: "å·²æ«æ°éï¼", |
|---|
| | | scanQty: "累计æ°éï¼", |
|---|
| | | remaindQty: "å®é
æ°éï¼", |
|---|
| | | tagFocus: true, |
|---|
| | | numberFocus: false, |
|---|
| | | focus: false, |
|---|
| | | tag: "", |
|---|
| | | number: "", |
|---|
| | | tagmatCode: "ç©æç¼ç ï¼", |
|---|
| | | tagmatName: "ç©æå称ï¼", |
|---|
| | | tagQty: "å
è£
æ°éï¼", |
|---|
| | | value: "", |
|---|
| | | range: [], |
|---|
| | | floor: "", |
|---|
| | | floorrange: [], |
|---|
| | | printfloor: "", |
|---|
| | | printfloorrange: [], |
|---|
| | | barcode: "", |
|---|
| | | address: "", |
|---|
| | | istrue: false, |
|---|
| | | outNum: 0, |
|---|
| | | itemCode: "", |
|---|
| | | releasefocus: true, |
|---|
| | | releasevalue: "", |
|---|
| | | matInfo: [], |
|---|
| | | matTotals: [], |
|---|
| | | value2: "", |
|---|
| | | searchValue: "", |
|---|
| | | endType: "", |
|---|
| | | endTypeRange: [], |
|---|
| | | sns: "", |
|---|
| | | receiveOrderId: 0, |
|---|
| | | warehouseId:"", |
|---|
| | | toastQueue: [], // æ示éå |
|---|
| | | isShowingToast: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | onLoad(res) { |
|---|
| | | this.range = config.warehouseRange; |
|---|
| | | this.endTypeRange = config.outboundAreaRange; |
|---|
| | | if (config.outboundArea) { |
|---|
| | | this.endType = config.outboundArea; |
|---|
| | | } |
|---|
| | | if (config.warehouseArea) { |
|---|
| | | this.value = config.warehouseArea; |
|---|
| | | } |
|---|
| | | this.orderNo = res.orderNo; |
|---|
| | | this.receiveOrderId = res.receiveOrderId; |
|---|
| | | this.label = "æ¶è´§åå·ï¼" + this.orderNo; |
|---|
| | | this.warehouseId=res.warehouseId; |
|---|
| | | this.getData(); |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.printfloorrange = config.printFloorRange; |
|---|
| | | this.floorrange = config.outboundFloorRange; |
|---|
| | | if (config.outboundFloor) { |
|---|
| | | this.floor = config.outboundFloor; |
|---|
| | | } |
|---|
| | | if (config.printFloor) { |
|---|
| | | this.printfloor = config.printFloor; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | showToast(options) { |
|---|
| | | this.toastQueue.push(options); |
|---|
| | | this.processToastQueue(); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // å¤çæ示éå |
|---|
| | | processToastQueue() { |
|---|
| | | // å¦ææ£å¨æ¾ç¤ºæ示æéå为空ï¼åä¸æ§è¡ |
|---|
| | | if (this.isShowingToast || this.toastQueue.length === 0) return; |
|---|
| | | |
|---|
| | | this.isShowingToast = true; |
|---|
| | | const toastOptions = this.toastQueue.shift(); |
|---|
| | | |
|---|
| | | // æ¾ç¤ºæ示 |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | ...toastOptions, |
|---|
| | | complete: () => { |
|---|
| | | // æ示å
³éåå¤çä¸ä¸ä¸ª |
|---|
| | | this.isShowingToast = false; |
|---|
| | | this.processToastQueue(); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | inputDialogToggle(itemCode) { |
|---|
| | | this.itemCode = itemCode; |
|---|
| | | this.$refs.inputDialog.open() |
|---|
| | | }, |
|---|
| | | // voiceSpeech(src) { |
|---|
| | | // innerAudioContext.src = src; // '../../static/success.mp3'; |
|---|
| | | // innerAudioContext.play(); |
|---|
| | | // }, |
|---|
| | | search() { |
|---|
| | | this.getData(); |
|---|
| | | }, |
|---|
| | | resetReceive(){ |
|---|
| | | this.PurchaseOrderNo="éè´åå·ï¼"; |
|---|
| | | this.matCode="ç©æç¼ç ï¼"; |
|---|
| | | this.LotNo="ç©ææ¹æ¬¡ï¼"; |
|---|
| | | this.orderQty="订åæ°éï¼"; |
|---|
| | | this.ProductionDate="ç产æ¥æï¼"; |
|---|
| | | this.EffectiveDate="æææ¥æï¼"; |
|---|
| | | this.Quantity=""; |
|---|
| | | setTimeout(() => { |
|---|
| | | this.innerCode=""; |
|---|
| | | this.focus=false; |
|---|
| | | }, 10); |
|---|
| | | }, |
|---|
| | | releasebox() { |
|---|
| | | if (this.releasevalue.length == 0) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«ç ", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var param; |
|---|
| | | var matInfo = this.releasevalue.split('|'); |
|---|
| | | if (matInfo.length == 7) { |
|---|
| | | param = { |
|---|
| | | MainData: { |
|---|
| | | "innerCode": this.releasevalue |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | param = { |
|---|
| | | MainData: { |
|---|
| | | "barcode": this.releasevalue |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.$u.post('/api/StockOperate/ReleaseAllBox', param).then(resdt => { |
|---|
| | | if (resdt.status) { |
|---|
| | | uni.$showMsg('解çæå!') |
|---|
| | | this.releasevalue = ""; |
|---|
| | | this.matInfo = []; |
|---|
| | | this.matTotals = []; |
|---|
| | | this.value2 = ""; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: resdt.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | releaseboxInput() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | if (this.releasevalue.length == 0) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var matInfo = this.releasevalue.split('|'); |
|---|
| | | this.matInfo = []; |
|---|
| | | if (matInfo.length == 7) { |
|---|
| | | this.$u.post('/api/StockOperate/GetStockInfoByInnerCode', { |
|---|
| | | MainData: { |
|---|
| | | "innerCode": this.releasevalue |
|---|
| | | } |
|---|
| | | }).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.matInfo = res.data.stockInfo; |
|---|
| | | this.matTotals = res.data.stockTotal; |
|---|
| | | this.value2 = res.data.barcode; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | this.$u.post('/api/StockOperate/GetStockInfoByBarcode', { |
|---|
| | | MainData: { |
|---|
| | | "barcode": this.releasevalue |
|---|
| | | } |
|---|
| | | }).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.matInfo = res.data.stockInfo; |
|---|
| | | this.matTotals = res.data.stockTotal; |
|---|
| | | this.value2 = res.data.barcode; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | updateFocus() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.innerCode = ''; |
|---|
| | | if (!this.focus) { |
|---|
| | | this.focus = true; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | submit() { |
|---|
| | | // æåç产æ¥æï¼æ ¼å¼ä¸º"ç产æ¥æï¼YYYY-MM"ï¼ |
|---|
| | | const productionDateStr = this.ProductionDate.replace('ç产æ¥æï¼', ''); |
|---|
| | | if (!productionDateStr) { |
|---|
| | | this.showToast({ |
|---|
| | | title: "æªè·åå°ç产æ¥æ", |
|---|
| | | type: 'error' |
|---|
| | | }); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 解æç产æ¥æçå¹´æ |
|---|
| | | const [prodYear, prodMonth] = productionDateStr.split('-').map(Number); |
|---|
| | | |
|---|
| | | // è·åå½åæ¥æçå¹´æ |
|---|
| | | const currentDate = new Date(); |
|---|
| | | const currentYear = currentDate.getFullYear(); |
|---|
| | | const currentMonth = currentDate.getMonth() + 1; |
|---|
| | | |
|---|
| | | // æ¯è¾å¹´ææ¯å¦ä¸è´ |
|---|
| | | const isDateMismatch = prodYear !== currentYear || prodMonth !== currentMonth; |
|---|
| | | if (isDateMismatch) { |
|---|
| | | this.showToast({ |
|---|
| | | title: "该ç©æç产æ¥æçå¹´æä¸å½åå¹´æä¸ä¸è´", |
|---|
| | | type: 'warning', |
|---|
| | | duration: 1500 |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // åæç确认æ¶è´§é»è¾ |
|---|
| | | if (this.sns == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«æå
ç®±æ ç¾", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.Quantity == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请è¾å
¥å®é
æ°é", |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if(this.warehouseId==2){ |
|---|
| | | //æ¿æ¢æå®ä¸¤ä¸ªå符é´çå符 |
|---|
| | | this.sns = this.sns.replace(/(Q:)([^,PO]+)(,PO)/, (match, p1, p2, p3) => { |
|---|
| | | return p1 + this.Quantity + p3; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const sendRequest = () => { |
|---|
| | | this.$u.post('/api/ReceiveOrderDetail/AddReceiveOrderDetail?serNum=' + this.sns + '&orderNo=' + this |
|---|
| | | .orderNo, {}).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.PurchaseOrderNo="éè´åå·ï¼"; |
|---|
| | | this.matCode="ç©æç¼ç ï¼"; |
|---|
| | | this.LotNo="ç©ææ¹æ¬¡ï¼"; |
|---|
| | | this.orderQty="订åæ°éï¼"; |
|---|
| | | this.ProductionDate="ç产æ¥æï¼"; |
|---|
| | | this.EffectiveDate="æææ¥æï¼"; |
|---|
| | | this.Quantity=""; |
|---|
| | | setTimeout(() => { |
|---|
| | | this.innerCode=""; |
|---|
| | | this.focus=false; |
|---|
| | | }, 100); |
|---|
| | | this.orderInfo=[]; |
|---|
| | | this.sns = ""; |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title:"确认æ¶è´§æå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | }; |
|---|
| | | // å¦æææ¥æä¸å¹é
æ示ï¼çå¾
æ示å®æååéè¯·æ± |
|---|
| | | if (isDateMismatch) { |
|---|
| | | setTimeout(sendRequest, 1500); // çå¾
1.5ç§ï¼ä¸æ示æ¶é¿ä¸è´ï¼ |
|---|
| | | } else { |
|---|
| | | sendRequest(); // 没ææ¥ææ示ï¼ç«å³åéè¯·æ± |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | submit1() { |
|---|
| | | this.$u.post('/api/ReceiveOrder/FeedbackReceiveOrder?orderId=' + this |
|---|
| | | .receiveOrderId, {}).then(x => { |
|---|
| | | if (x.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "å®ææ¶è´§æå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | this.sns = ""; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: x.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | inbound() { |
|---|
| | | if (this.barcode.length == 0) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«ææçå·", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.address.length == 0) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«æå°åæ¡ç ", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | "barcode": this.barcode, |
|---|
| | | "startPoint": this.address |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.$u.post('/api/Inbound/RequestInbound', postData).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | uni.$showMsg(res.message); |
|---|
| | | this.barcode = ""; |
|---|
| | | this.address = ""; |
|---|
| | | this.istrue = false; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }).catch(err => { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: err.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | inputChangebarcode() { |
|---|
| | | this.istrue = false; |
|---|
| | | this.$nextTick(function(x) { |
|---|
| | | if (this.barcode != '') { |
|---|
| | | this.istrue = true; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | onClickItem(e) { |
|---|
| | | console.log(1) |
|---|
| | | this.focus = false; |
|---|
| | | this.addressFocus = false; |
|---|
| | | if (this.current !== e.currentIndex) { |
|---|
| | | this.current = e.currentIndex; |
|---|
| | | if (this.current == 1) { |
|---|
| | | this.getData(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | getData() { |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | orderNo: this.orderNo, |
|---|
| | | searchValue: this.searchValue |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | this.$u.post('/api/ReceiveOrderDetail/GetReceiveOrderInfos', postData).then((res) => { |
|---|
| | | if (res.status) { |
|---|
| | | this.orderinfoDetails = res.data; |
|---|
| | | if (this.orderinfoDetails.length > 3) { |
|---|
| | | this.loadVisible = true; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | innercodeInput() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | if (this.innerCode == "") { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var innerCode = this.innerCode; |
|---|
| | | //å°innerCode,SCåé¢çè¿è¡æ¿æ¢ç©º |
|---|
| | | if(this.warehouseId==11){ |
|---|
| | | innerCode=innerCode.replace(/,SC.*/, ''); |
|---|
| | | } |
|---|
| | | |
|---|
| | | if(innerCode.indexOf("POHA")>0){ |
|---|
| | | this.$u.post('/api/MaterielInfo/CodeAnalysis?serNum=' + innerCode, {}).then((res) => { |
|---|
| | | if (res.status) { |
|---|
| | | this.sns = res.data.serialNumber; |
|---|
| | | // this.matInfos.splice(0, this.matInfos.length); |
|---|
| | | // this.matInfos.push(res.data); |
|---|
| | | this.matCode = "ç©æç¼ç ï¼" + res.data.materielCode; |
|---|
| | | this.LotNo = "ç©ææ¹æ¬¡ï¼" + res.data.lotNo; |
|---|
| | | this.PurchaseOrderNo = "éè´åå·ï¼" + res.data.purchaseOrderNo; |
|---|
| | | this.EffectiveDate = "æææ¥æï¼" + res.data.effectiveDate; |
|---|
| | | this.ProductionDate = "ç产æ¥æï¼" + res.data.productionDate; |
|---|
| | | this.orderQty = "订åæ°éï¼" + res.data.quantity; |
|---|
| | | this.Quantity = res.data.quantity; |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/success.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.voiceSpeech('../../static/fail.mp3'); |
|---|
| | | // }, 100); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | setTimeout(() => { |
|---|
| | | this.innerCode = ""; |
|---|
| | | this.focus=true; |
|---|
| | | }, 100); |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | tagInput() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | var tagInfos = this.tag.split('|'); |
|---|
| | | if (tagInfos.length == 7) { |
|---|
| | | this.tagmatCode = "ç©æç¼ç ï¼" + tagInfos[1]; |
|---|
| | | this.tagQty = "ç©ææ°éï¼" + tagInfos[5]; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "å
ç®±ç æ«æé误", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | this.numberFocus = true; |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | printTag() { |
|---|
| | | if (this.tag == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请æ«æå
ç®±æ ç¾", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.number <= 0) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请è¾å
¥æ°é", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.printfloor.length <= 0) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请éæ©æ¥¼å±", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | tag: this.tag, |
|---|
| | | number: this.number, |
|---|
| | | floor: this.printfloor |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.$u.post('/api/StockOperate/PrintTag', postData).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "æå°æå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | this.tagmatCode = "ç©æç¼ç ï¼"; |
|---|
| | | this.tagQty = "å
è£
æ°éï¼"; |
|---|
| | | this.tag = ""; |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | outbound(val) { |
|---|
| | | if (this.floor == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请éæ©æ¥¼å±", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.value == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请éæ©åºå", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.endType == "") { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "请éæ©åºåºåºå", |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var postData = { |
|---|
| | | MainData: { |
|---|
| | | matCode: this.itemCode, |
|---|
| | | orderNo: this.orderNo, |
|---|
| | | system: this.value, |
|---|
| | | floor: this.floor, |
|---|
| | | outNum: val, |
|---|
| | | endType: this.endType |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.$u.post('/api/ErpOrder/ReceiveOrderOutbound', postData).then(res => { |
|---|
| | | if (res.status) { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: "æå", |
|---|
| | | type: "success" |
|---|
| | | }) |
|---|
| | | this.getData(); |
|---|
| | | } else { |
|---|
| | | this.$refs.uToast.show({ |
|---|
| | | title: res.message, |
|---|
| | | type: "error" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '@/common/uni-ui.scss'; |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | display: flex; |
|---|
| | | height: 150px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content-text { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .itemstyle { |
|---|
| | | margin-top: 20px; |
|---|
| | | margin-left: 5%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .headerstyle { |
|---|
| | | width: 90%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | @font-face { |
|---|
| | | font-family: "custom-icon"; |
|---|
| | | src: |
|---|
| | | url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAABIYAAwAAAAAJkAAABHHAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIoMUIzYGYACBJAq9MK0dATYCJAOCfguBRAAEIAWCFAcgG5YcUZSSVnqyH4fpRiPfJMmbLUh2F/7neBlKafA0Zz9vs7GNbHY3QvAkFKgoZsElWGrAb6qCH6kr7VnFqahBlU/tuPOciOz/1kz1E5a8W9KMdjfAcCsd0zeQsGEh7DZAUxi1PGpvAtsFMlCA2YCWbLsPQVhdLFc2tb2VAkbsglh0sidNQVXzZLh/KdG/3iAy8FsBvfktEwapgjKdU7r6l0ygCwB0qTI9NU2KokrRlYG0uT6MOpBG2kM9xlzeXWuT4QCVcL6ib0S/BgEADoAWwCxkgQI8kDgp0EeFghQyP1EGhSIHA3WoNkICJcyQyMA3UYUArRpWSKFByFarRT+owCICPoUOdkjAIRUEPNJAQwCBHhQMIDCCwMTBC8zgDT7gC37gDwEQCBawgg2CoA8EQwiEQl/oDwNgIAyCwTAEhkEYhEMEREIUREMMxCpxkCCeGSdAjkTQSIIUdg+SIVVJhwKZgLMB58SQC/m5xVYWQhEuBiiBMuwAXM5wBTxbFQiqQeAEwXAQjAAwEjKMghKjYS3AgLA2mUncDvG15sXYH4JFsTWZxPbhYUFF8a/vRGRF0XVcPDxMMKJpE1kDKWjqTcoFIJ/fC3EhjIQBzic64cELCgvScRWBn7dK3KIbkLjhBkBwJzSlugAEAtSABIDeFwh301ijocTT+IIeyiPzsJ7+nsGeDE+JZ46nwTPP89fn7Ofhn7eKojZ7kjbX8+dLih/1EPN/5t/Mr80vzNfNZ8wbzOvNy80GM/Hq9dpozOBIqMEnuw7gbUAhAjF/ALgJYPT8zAiqaUigAGGCZKA+KSgQYCSBUnBKLxHFFFuAlZg5VxTTxx7IAC+hXiy3Ohv3aiw35CoflmhOSh1CePE8J5PTA7x1nsdngG/Q1ovlTFpW7aslpp+2TEer+eR8jtqFqPVqg7lf8BXRIDuE4GUmrY7nWUHtTS9odX0s/bUWi1YtU3t22g9JoyEa/6w+/qyeV+t4QWdezeDI0WC/g2K/rWEb9l+RDZSm9CkqMXb2SrRCRYgwAFxjHG3gPokKrcwRfoKZvDdm0qhjXsz1EQnn+cQN3EpXmKFOREFKHFUB7tkzZMSBs9//n3Vy1dVloZ4hQlmuMYzbIvFQKOm9Z0e7atOufigUyo9r6IyfhHGkAbghWM7WPwmZnszV3eYJ1Y0Ngv74kLDcpaZDl8uirX8fA/8uSWXaZ8xNhKVQ51dcnlP5t1shKKe7585H3KltMDeozkHuU1DKUuDWp30YU5iRO/PiI735px2JpdP9Z8s20XmFO6M3MJi3R/m/vyQd4nn3binpO9o09RUciy7Rg1cIObwbhuhkyTvi9/1gSpYKqTNMEUdFVJwZYa2rm5s0LAIvERdEyJiqc6b5TSKuI9dwdCMQFTRufOeUjNcIESX290sino/JknhURipduEsNeBVL+U4Bs+KMt5Yw3F5r2O/Ae3I91alFHE2WeVruyiDdWasypUDENMPWKAzcoVzjSKKH4DH7YWqOZNOA+d3WRdorM5YqBP06x3p2n30qS2V+g6fzVGYtV5WYyQXOLVY4802h57bAgdlJQ5MUwO2FKWM6X1qKsHlkTho4OVHh1ZOlJk7Cvbll6kz8yoeIC2ayJvqFfd1zMkYTBKC6MpPzto3u6mro7wX33nIwlVOLPblqI6xU3rYAHAfrFJVawP7sUmtmtT2r1p5RaTqWYi0U/lHhn2370OoZ1sKR02hA020GIG5voiY05jduMdEd70wLeNtv323oHM0pcSKojtoac6hE+WcOqDfqIBFL7SkkGIv23ngsFZR2dkZUkMnRHNZOi1kDyRHTaueAOFlPfesEjurmScf9R5I4i3RJSbW2c8BHGeMn0mh3clfi7IBNsbDNf6mUYKkS5KYmi5Pj+e7slIRKpnpmJOIJMS3lWBVxaSfdaAJLWQm1SdRg8LPT8FR2sZQxkMlBr/Wze8S0h+3n1pbXchoidpvu801ixfUJfzaehd9be2PiX+2XUeaocMUjtmMKm0RPf3HyHexjA33qc8twN3WkH1sOnI6rtyTWhB3l2FBT0SOSIJljW3pqvIsI5htuaxxRZ2j2LbCK7iel2pVxNNOr8lmDozCktNxo9nWvByBm1aAuzGI1PrO/Hu10Wg5nuCi8vmyMMjMq8zC8PUlTi2+lvB2xrzHMKz79YEohzWhOJSqUAzbkLKpKdIibMLgBFQfQdn97TgzRgy3RsFfzDAqvbwIMeKAPI9y91fu6NA5Clw6FEb6wjDGK7SHgcbd4r5wLbeLvOmMgEkf6RdArtkybfTOczn59uxRnxlLIgLi2+5nhjbPyPaBKI61m0rYdKUdDrZlvayZH/YKs9SQjE7XNkgbFjLG92ZJOUJ5Q/jFn88q6LJV+DWde5eptnduvbx2tucE3dj+U/YjMYeDBBvrNMYiNJe3No33wGsw4wi0DfUNib9IVQ3na+UiI0CD5sdd+b410vENgdxb8MMD5GRVk9SWM4W0xvMen0evUI/xu9OQMDOdnn5Iv4G0YzD2x8spHF3BsCLmZxsGvg9C3HeS3wfBd7LCZSh6Z4s5VJeBTHWccRi9PnRymjfbzdlsl3nAIGkzUahEUNldcFquutgH48TGBt1ZeiTx79Nluu6TObruJeFtqdN38C1Hcs4SonU0IL/UO3RmOuLrwyJ3j1DOlRKfOQ26qOzcNsEvs2WYOosNao1Ovg1LR/K1iS/2jUlPv5LbTIJ2k+Y1Jws/IDnOPcD/EW+r4mX96hM5OAYNi2IT8u1ej29qcf/YsrI3Bd9M6XErMVXYxbqZLyZsGrYSb6WRQcjmC835XphgMw+HC7HW/LPt5WK0t+6OcvPD0MNVtuGtJ/SC/W0QMjXTW6eTsszKniwDWr9T8WC5kofOUkd3EE0JJ8c7g0nS+J4Dv7OU0X1kj1+vCiMQClDn7Ml3ukt178ydubU9hupgBRVWTG7Wb2Uh2qS5ibMVGsUvYZkaODtcV68IuPOWaSN2SNUfuw0cj8kdtYWllZepR7WZtdATbgm06yi5GdSbTEDGW7rUDBn9iV0N90jW0bqodPy5k044YlY9DvNQF/PYZJj9x1vUj/K73+IAeIa108DuQUoQIG1nT7omzQ7j6KH41DCvA6Sp7xspl+EH1/76oagDTqyxZfMSZsPdUiruX6VvqBOFmLOiRYSw14bQu1fsDK6zd7G1/7K1LO5276lW3f3fAzVfX9/UpCPm5MDt37eQgtpsNmry3Ex9QMglD0dTHqh9U3UGKL8egYXT9YtO4d/eF1RZL1fW5ufWm+tNWi49OUovq4pKKLT9WVTIHqh9dobxMBdVejYwdgQ8DLadZuyyBXRjKnzB2Gl3GXqOFkbmM7xlXqfx83M6gIKd7vHfySg2ngfIWDa++yM2HRJNabVHP+ErDq7jrTS2l+QZftdUb53Rm5m70MW3Z9AMZX+XjW7UxfzFZuNHHa3O7SG2v8jVt2TXrQL1aheemYcxD5sRd9hw9/RXTxSh7mb+oV8l0of7umrjZQRVjh85ZGzvHNrYiGVFP7iX1+0in1ToCK1xkzLS6Me1XThB79S2o11VeLgC2kAbRP+xnOpntjH7hUPWiXWUn5XKKeyHQxbTwJy9Y6UPNWc2w/17LMMsYZuLCp+f05lfz/iVYBXo15mtas1rx9chRSxbFXbWraPKN6Z8xDrVltaF9sb3SRgu88HXlN7zA17Llqqwp2NB3NFrK0uXs+h9lsTt3u2i18BVQM58n4FJL1iR827dmweKsiCt+jteWoTLDe/vWaKyaU/HtJFYyZMLjPN73nkE21PJ66+jFXouhClSrs/C1Ee7Oxf6EhGdPt0CSo2mdIsnt6Mije3q0uRMCDL0GTx/J7vTM/ht89W+SsuQoFrYMBGcm/IQU/YFRI20XUj5CeuZW6PYIKbxd2D3cKewZLKTs0bGoHqzf4xyu362ieJiksFdMBRVVHZgdUmEo8R1bPVxYd9WpKrOzK1VAgy9q934jZFrcqJDszQiSSYUqfNCmyuIiqy3ZwRXGEp9KWsHOp5xmFR2KUx8bU+GM46uykTy/Wp1VVZWlvqOqLMNKldfOV/IDckWH/O6KOvUKe1GsQp5RId9WlZ1VpZKVGM+rU6w273HeaDivSbFZP/t5/Z/QrUjcOnDA1sQVOl1LwdYBA7cWtIC69NVZ7uww7to3Z8RL/20tUl796WoRqMGKr3oWFPvVae70EO76t2fQHcR9Pvn8Sj/Vga2nHnRNOvu22q/jrTP/n/R51r6v45p2F+7H/9ME+YwrpxqczvbdPWtt7dZzJ5fmOnPzTm496zm43Ypv/UOtRaOxaD/UWOG9cG3Z1BvVE+NzJ95wTD4x0RnvwtahOjKuJC24bo6mNHVI6tCSAjWkzl2SOqQ8uXxg7EdLHN6pqxxLnwQobb7tiIVd9/aEmPZZZXvWN5LubEbUiaa+7VuTEhPdpr1vU+O6vcuHqMWieJZh4k/nx7UJ16PiyPSyLrcVGXW5uPxVkmvKqr4cZ08yEU5SrHdSNBgjJ4QoHPUNDt7hUAbBGzfn5bryATw++MlnGeErlI5PPN8PHCCePC1Wixca+vXfcbz+Yiefp/zO+xkvYKh7Hsw85zP8aXoYH8VPbrD6eFvDbJG2J8+P/0EVrmJ6EGPlNhMoLyrLBI4bal47z5Um/70TR0+vSz/W6mIY1+R6l8E17P2/N+3erWlgOnHrgfKAUnFRMZfR4bvFtrabfkv8kanqB6KQWMZNTCvSUVA6Jky20hTRajPhvwQr1vIcl7zjQJbKcXyzdmBO/c2bjmk6CVRjb98K/8gyhGKLAkPW0P5L/GYWm61Wm8babDW2bjZNG2QLatxp++1YOf/rGL9TvkWRUXLFLjiXzPO2G1B4QBptU8vNDznmAHFZDKNXVtHOUDMLFsxawKjOeIE5EHN9u619lpRpy3zb5hu2G4gfhjtnWio22+iFG/4oWBL5rNQZXpoQUbD0iw2qMFvF5kkT76D5Is8FcYE5v4rDjJCmI5iFJAtxeApKa2pajKbKco54jGtLxbfwBkVclaaaiTIjYt6ceOf0neaWiWdu35mIo5YvVmU0rfoDhdIrv8Do0r4IQX4ZxG53tSnbX+4oF/c7EMvKREIkUZYOx+KjzNH2/Q6VAYCDX8KfipPbhqnO1J9v4OD5tNphwDsrOjq6qem8wPMXamq+W+dzM/+78yNdtF3otF3s2N/J8ZjTBEQXjOgfZ0+qPPrz4cTg3wMGPg0Q/J8OCuACBj31FwKeDgyYKeLLimE52XJjSHAa6ag2HFkDr53uZctuwUxQvOnp+a3JS6/3+q2xx2MG/fqOeeTq6cF/psmgN/3edFEw5AmZBNX+M7z0Bh1sP52eMnVaSnraoJra9pRpiGnpse40xFEhwam8UCjwJYXiMIIktEAw+gEI8R1rsIsmbV4CUZHohlwI1ChDAcgIT4vrUgDIcVA3lOY0CjwBhIw4KmOCOUvI2pjzEvOwSSho0VNAavh2//2eB3JfJYJRqrCValBp5JQ0irWAUNlaVOUmqGQOzexuOPSWv4fLxWuD3MY+DUE8DbINE8g6SRE5RfaJf5PvcZAkYkwbEiPFi39TVThItXjoxl6YIP5B/U7k6EZI/JoHGrIJl0FqDI7Be2b/O4qN/1UhoXGo+aT9zCAMEP8R0Scl7sHZqC5Y8Zv8uOlr4j//RJ/8Ddw0UqBZhPhfLOIhFS5AHk6swulTk0SxaCgNLLnl9LXq6J8Iak4k8bMlcaYZ9GUBldkcdKwpoEE+EiUGxDsY7IR8WhWB3yPxB9oVQRVHIoHtCS3XLaNPQjILqPvm8ASs4JxpLLJVbffbBx5ti5AERqBcJgdNjyUyfgIJ4E6yD0CDmAhYS4PiwekZdFItQK6oTGaqziNHqjNpkdIwCEPZIjwARchxARzjdBQfUjtg9vhqsA8KZEFmGU4OlKEAEhBa+S+XDbGTgnbOwUYJ4hG0kUYwRm+UwhuLsIxItqEOszETszAVkzEQ41EXPtgUlGAMxmI2JqEGMzAUgzDkqMShAIUMp+MAKp1s4HwABbILxOUSnrG1jdf0aG0IWnBIcLipeAL/S7EA') format('woff2'); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .custom-icon { |
|---|
| | | font-family: "custom-icon" !important; |
|---|
| | | font-size: 16px; |
|---|
| | | font-style: normal; |
|---|
| | | -webkit-font-smoothing: antialiased; |
|---|
| | | -moz-osx-font-smoothing: grayscale; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .custom-icon-_WMS_rukuyewu:before { |
|---|
| | | content: "\e70f"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .custom-icon-chuku:before { |
|---|
| | | content: "\e602"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .custom-icon-ruku:before { |
|---|
| | | content: "\e606"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .custom-icon-zhijin:before { |
|---|
| | | content: "\e652"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .custom-icon-shouhuo:before { |
|---|
| | | content: "\e60f"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .custom-icon-kucunpandian-:before { |
|---|
| | | content: "\e646"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .custom-icon-ppt:before { |
|---|
| | | content: "\e734"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .custom-icon-chengpinchuku:before { |
|---|
| | | content: "\e62f"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .custom-icon-jianxuandan:before { |
|---|
| | | content: "\e62b"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .custom-icon-kucunchaxun:before { |
|---|
| | | content: "\e681"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .custom-icon-zhuangxiangruku1:before { |
|---|
| | | content: "\e601"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .custom-icon-chanpin-youmotuliao:before { |
|---|
| | | content: "\e682"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .custom-icon-bancaiwuliao:before { |
|---|
| | | content: "\e676"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .custom-icon-ceshijiaguanli:before { |
|---|
| | | content: "\e678"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .custom-icon-lingliaozupan:before { |
|---|
| | | content: "\e77d"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .custom-icon-chengpincangku:before { |
|---|
| | | content: "\e6f9"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .custom-icon-fuliaocangku:before { |
|---|
| | | content: "\e6fa"; |
|---|
| | | } |
|---|
| | | |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="zh-CN"> |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8"> |
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|---|
| | | <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico"> |
|---|
| | | <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> |
|---|
| | | <title> |
|---|
| | | <%= htmlWebpackPlugin.options.title %> |
|---|
| | | </title> |
|---|
| | | <script> |
|---|
| | | document.addEventListener('DOMContentLoaded', function() { |
|---|
| | | document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px' |
|---|
| | | }) |
|---|
| | | </script> |
|---|
| | | <link rel="stylesheet" href="<%= BASE_URL %>static/index.css" /> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <noscript> |
|---|
| | | <strong>æ¬ç«ç¹å¿
é¡»è¦å¼å¯JavaScriptæè½è¿è¡</strong> |
|---|
| | | </noscript> |
|---|
| | | <div id="app"></div> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | TuniaoUi for uniApp v1.0.0 | by å¾é¸ 2021-09-01 |
|---|
| | | ä»
ä¾å¼åï¼å¦ä½å®ç¨ææ¿åçæ³å¾è´£ä»»ä¸æ¦ä¸ä½è
æ å
³ |
|---|
| | | |
|---|
| | | *使ç¨TuniaoUiå¼åæ©å±ä¸æ件æ¶ï¼è¯·æ³¨æåºäºtuniaoåç¼ |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view v-if="value" class="tn-action-sheet-class tn-action-sheet"> |
|---|
| | | <tn-popup |
|---|
| | | v-model="value" |
|---|
| | | mode="bottom" |
|---|
| | | length="auto" |
|---|
| | | :popup="false" |
|---|
| | | :borderRadius="borderRadius" |
|---|
| | | :maskCloseable="maskCloseable" |
|---|
| | | :safeAreaInsetBottom="safeAreaInsetBottom" |
|---|
| | | :zIndex="elZIndex" |
|---|
| | | @close="close" |
|---|
| | | > |
|---|
| | | <!-- æç¤ºä¿¡æ¯ --> |
|---|
| | | <view |
|---|
| | | v-if="tips.text" |
|---|
| | | class="tn-action-sheet__tips tn-border-solid-bottom" |
|---|
| | | :style="[tipsStyle]" |
|---|
| | | > |
|---|
| | | {{tips.text}} |
|---|
| | | </view> |
|---|
| | | <!-- æé®å表 --> |
|---|
| | | <block v-for="(item, index) in list" :key="index"> |
|---|
| | | <view |
|---|
| | | class="tn-action-sheet__item tn-text-ellipsis" |
|---|
| | | :class="[ index < list.length - 1 ? 'tn-border-solid-bottom' : '']" |
|---|
| | | :style="[itemStyle(index)]" |
|---|
| | | hover-class="tn-hover-class" |
|---|
| | | :hover-stay-time="150" |
|---|
| | | @tap="itemClick(index)" |
|---|
| | | @touchmove.stop.prevent |
|---|
| | | > |
|---|
| | | <text>{{item.text}}</text> |
|---|
| | | <text v-if="item.subText" class="tn-action-sheet__item__subtext tn-text-ellipsis">{{item.subText}}</text> |
|---|
| | | </view> |
|---|
| | | </block> |
|---|
| | | |
|---|
| | | <!-- åæ¶æé® --> |
|---|
| | | <block v-if="cancelBtn"> |
|---|
| | | <view class="tn-action-sheet__cancel--gab"></view> |
|---|
| | | <view |
|---|
| | | class="tn-action-sheet__cancel tn-action-sheet__item" |
|---|
| | | hover-class="tn-hover-class" |
|---|
| | | :hover-stay-time="150" |
|---|
| | | @tap="close" |
|---|
| | | >{{cancelText}}</view> |
|---|
| | | </block> |
|---|
| | | |
|---|
| | | </tn-popup> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'tn-action-sheet', |
|---|
| | | props: { |
|---|
| | | // éè¿v-modelæ§å¶å¼¹åºåæ¶èµ· |
|---|
| | | value: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // æé®æåæ°ç»ï¼å¯ä»¥èªå®ä¹é¢è²ååä½å¤§å° |
|---|
| | | // return [{ |
|---|
| | | // text: 'ç¡®å®', |
|---|
| | | // subText: 'è¿æ¯ä¸ä¸ªç¡®å®æé®', |
|---|
| | | // color: '', |
|---|
| | | // fontSize: '', |
|---|
| | | // disabled: true |
|---|
| | | // }] |
|---|
| | | list: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 顶é¨æ示æå |
|---|
| | | tips: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return { |
|---|
| | | text: '', |
|---|
| | | color: '', |
|---|
| | | fontSize: 26 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // å¼¹åºç顶é¨åè§å¼ |
|---|
| | | borderRadius: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // ç¹å»é®ç½©å¯ä»¥å
³é |
|---|
| | | maskCloseable: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // åºé¨åæ¶æé® |
|---|
| | | cancelBtn: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // åºé¨åæ¶æé®çæå |
|---|
| | | cancelText: { |
|---|
| | | type: String, |
|---|
| | | default: 'åæ¶' |
|---|
| | | }, |
|---|
| | | // å¼å¯åºé¨å®å
¨åºå |
|---|
| | | // å¨iPhoneXæºååºé¨æ·»å ä¸å®çå
è¾¹è· |
|---|
| | | safeAreaInsetBottom: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // z-indexå¼ |
|---|
| | | zIndex: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // 顶é¨æç¤ºæ ·å¼ |
|---|
| | | tipsStyle() { |
|---|
| | | let style = {} |
|---|
| | | if (this.tips.color) style.color = this.tips.color |
|---|
| | | if (this.tips.fontSize) style.fontSize = this.tips.fontSize + 'rpx' |
|---|
| | | |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | // æä½é¡¹ç®çæ ·å¼ |
|---|
| | | itemStyle() { |
|---|
| | | return (index) => { |
|---|
| | | let style = {} |
|---|
| | | if (this.list[index].color) style.color = this.list[index].color |
|---|
| | | if (this.list[index].fontSize) style.fontSize = this.list[index].fontSize + 'rpx' |
|---|
| | | |
|---|
| | | // é项被ç¦ç¨çæ ·å¼ |
|---|
| | | if (this.list[index].disabled) style.color = '#AAAAAA' |
|---|
| | | |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | elZIndex() { |
|---|
| | | return this.zIndex ? this.zIndex : this.$t.zIndex.popup |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // ç¹å»åæ¶æé® |
|---|
| | | close() { |
|---|
| | | // åéinputäºä»¶ï¼å¹¶ä¸ä¼ä½ç¨äºç¶ç»ä»¶ï¼èæ¯è¦è®¾ç½®ç»ä»¶å
é¨éè¿propsä¼ éçvalueåæ° |
|---|
| | | this.popupClose(); |
|---|
| | | this.$emit('close'); |
|---|
| | | }, |
|---|
| | | // å
³éå¼¹çª |
|---|
| | | popupClose() { |
|---|
| | | this.$emit('input', false) |
|---|
| | | }, |
|---|
| | | // ç¹å»å¯¹åºçitem |
|---|
| | | itemClick(index) { |
|---|
| | | // å¦ææ¯ç¦ç¨é¡¹åä¸è¿è¡æä½ |
|---|
| | | if (this.list[index].disabled) return |
|---|
| | | this.$emit('click', index) |
|---|
| | | this.popupClose() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | |
|---|
| | | .tn-action-sheet { |
|---|
| | | &__tips { |
|---|
| | | font-size: 26rpx; |
|---|
| | | text-align: center; |
|---|
| | | padding: 34rpx 0; |
|---|
| | | line-height: 1; |
|---|
| | | color: $tn-content-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | font-size: 32rpx; |
|---|
| | | padding: 34rpx 0; |
|---|
| | | |
|---|
| | | &__subtext { |
|---|
| | | font-size: 24rpx; |
|---|
| | | color: $tn-content-color; |
|---|
| | | margin-top: 20rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__cancel { |
|---|
| | | color: $tn-font-color; |
|---|
| | | |
|---|
| | | &--gab { |
|---|
| | | height: 12rpx; |
|---|
| | | background-color: #eaeaec; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="tn-avatar-group-class tn-avatar-group"> |
|---|
| | | <view v-for="(item, index) in lists" :key="index" class="tn-avatar-group__item" :style="[itemStyle(index)]"> |
|---|
| | | <tn-avatar |
|---|
| | | :src="item.src || ''" |
|---|
| | | :text="item.text || ''" |
|---|
| | | :icon="item.icon || ''" |
|---|
| | | :size="size" |
|---|
| | | :shape="shape" |
|---|
| | | :imgMode="imgMode" |
|---|
| | | :border="true" |
|---|
| | | backgroundColor="rgba(255, 255, 255, 0.4)" |
|---|
| | | :borderSize="4" |
|---|
| | | ></tn-avatar> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'tn-avatar-group', |
|---|
| | | props: { |
|---|
| | | // 头åå表 |
|---|
| | | lists: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 头åç±»å |
|---|
| | | // square 带åè§æ£æ¹å½¢ circle åå½¢ |
|---|
| | | shape: { |
|---|
| | | type: String, |
|---|
| | | default: 'circle' |
|---|
| | | }, |
|---|
| | | // å¤§å° |
|---|
| | | // sm å°å¤´å lg 大头å xl å 大头å |
|---|
| | | // å¦æ为å
¶ä»å认为æ¯ç´æ¥è®¾ç½®å¤§å° |
|---|
| | | size: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // å½è®¾ç½®ä¸ºæ¾ç¤ºå¤´åä¿¡æ¯æ¶ï¼ |
|---|
| | | // å¾ççè£åªæ¨¡å¼ |
|---|
| | | imgMode: { |
|---|
| | | type: String, |
|---|
| | | default: 'aspectFill' |
|---|
| | | }, |
|---|
| | | // 头åä¹é´çé®æ¡æ¯ä¾ |
|---|
| | | // 0.4 代表 40% |
|---|
| | | gap: { |
|---|
| | | type: Number, |
|---|
| | | default: 0.4 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | itemStyle() { |
|---|
| | | return (index) => { |
|---|
| | | let style = {} |
|---|
| | | if (this._checkSizeIsInline()) { |
|---|
| | | switch(this.size) { |
|---|
| | | case 'sm': |
|---|
| | | style.marginLeft = index != 0 ? `${-48 * this.gap}rpx` : '' |
|---|
| | | break |
|---|
| | | case 'lg': |
|---|
| | | style.marginLeft = index != 0 ? `${-96 * this.gap}rpx` : '' |
|---|
| | | break |
|---|
| | | case 'xl': |
|---|
| | | style.marginLeft = index != 0 ? `${-128 * this.gap}rpx` : '' |
|---|
| | | break |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | const size = Number(this.size.replace(/(px|rpx)/g, '')) || 64 |
|---|
| | | style.marginLeft = index != 0 ? `-${size * this.gap}rpx` : '' |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // æ£æ¥æ¯å¦ä½¿ç¨å
ç½®ç大å°è¿è¡è®¾ç½® |
|---|
| | | _checkSizeIsInline() { |
|---|
| | | if (/(xs|sm|md|lg|xl|xxl)/.test(this.size)) return true |
|---|
| | | else return false |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .tn-avatar-group { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="tn-avatar-class tn-avatar" |
|---|
| | | :class="[backgroundColorClass,avatarClass]" |
|---|
| | | :style="[avatarStyle]" |
|---|
| | | @tap="click" |
|---|
| | | > |
|---|
| | | <image |
|---|
| | | v-if="showImg" |
|---|
| | | class="tn-avatar__img" |
|---|
| | | :class="[imgClass]" |
|---|
| | | :src="src" |
|---|
| | | :mode="imgMode || 'aspectFill'" |
|---|
| | | @error="loadImageError" |
|---|
| | | ></image> |
|---|
| | | <view v-else class="tn-avatar__text" > |
|---|
| | | <view v-if="text">{{ text }}</view> |
|---|
| | | <view v-else :class="[`tn-icon-${icon}`]"></view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <!-- è§æ --> |
|---|
| | | <tn-badge |
|---|
| | | v-if="badge && (badgeIcon || badgeText)" |
|---|
| | | :radius="badgeSize" |
|---|
| | | :backgroundColor="badgeBgColor" |
|---|
| | | :fontColor="badgeColor" |
|---|
| | | :fontSize="badgeSize - 8" |
|---|
| | | :absolute="true" |
|---|
| | | :top="badgePosition[0]" |
|---|
| | | :right="badgePosition[1]" |
|---|
| | | > |
|---|
| | | <view v-if="badgeIcon && badgeText === ''"> |
|---|
| | | <view :class="[`tn-icon-${badgeIcon}`]"></view> |
|---|
| | | </view> |
|---|
| | | <view v-else> |
|---|
| | | {{ badgeText }} |
|---|
| | | </view> |
|---|
| | | </tn-badge> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import componentsColorMixin from '../../libs/mixin/components_color.js' |
|---|
| | | export default { |
|---|
| | | mixins: [componentsColorMixin], |
|---|
| | | name: 'tn-avatar', |
|---|
| | | props: { |
|---|
| | | // åºå· |
|---|
| | | index: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // 头åç±»å |
|---|
| | | // square 带åè§æ£æ¹å½¢ circle åå½¢ |
|---|
| | | shape: { |
|---|
| | | type: String, |
|---|
| | | default: 'circle' |
|---|
| | | }, |
|---|
| | | // å¤§å° |
|---|
| | | // sm å°å¤´å lg 大头å xl å 大头å |
|---|
| | | // å¦æ为å
¶ä»å认为æ¯ç´æ¥è®¾ç½®å¤§å° |
|---|
| | | size: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºé´å½± |
|---|
| | | shadow: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºè¾¹æ¡ |
|---|
| | | border: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // è¾¹æ¡é¢è² |
|---|
| | | borderColor: { |
|---|
| | | type: String, |
|---|
| | | default: 'rgba(0, 0, 0, 0.1)' |
|---|
| | | }, |
|---|
| | | // è¾¹æ¡å¤§å°, rpx |
|---|
| | | borderSize: { |
|---|
| | | type: Number, |
|---|
| | | default: 2 |
|---|
| | | }, |
|---|
| | | // 头åè·¯å¾ |
|---|
| | | src: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // æå |
|---|
| | | text: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // å¾æ |
|---|
| | | icon: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // å½è®¾ç½®ä¸ºæ¾ç¤ºå¤´åä¿¡æ¯æ¶ï¼ |
|---|
| | | // å¾ççè£åªæ¨¡å¼ |
|---|
| | | imgMode: { |
|---|
| | | type: String, |
|---|
| | | default: 'aspectFill' |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºè§æ |
|---|
| | | badge: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // 设置æ¾ç¤ºè§æ åï¼è§æ å¤§å° |
|---|
| | | badgeSize: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // è§æ èæ¯é¢è² |
|---|
| | | badgeBgColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#AAAAAA' |
|---|
| | | }, |
|---|
| | | // è§æ åä½é¢è² |
|---|
| | | badgeColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#FFFFFF' |
|---|
| | | }, |
|---|
| | | // è§æ å¾æ |
|---|
| | | badgeIcon: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // è§æ æåï¼ä¼å
级æ¯iconé« |
|---|
| | | badgeText: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // è§æ åæ |
|---|
| | | // [top, right] |
|---|
| | | badgePosition: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return [0, 0] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // å¾çæ¾ç¤ºæ¯å¦åçé误 |
|---|
| | | imgLoadError: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | showImg() { |
|---|
| | | // å¦æ设置äºå¾çå°åï¼å为æ¾ç¤ºå¾çï¼å¦å为æ¾ç¤ºææ¬ |
|---|
| | | return this.text === '' && this.icon === '' |
|---|
| | | }, |
|---|
| | | avatarClass() { |
|---|
| | | let clazz = '' |
|---|
| | | clazz += ` tn-avatar--${this.shape}` |
|---|
| | | |
|---|
| | | if (this._checkSizeIsInline()) { |
|---|
| | | clazz += ` tn-avatar--${this.size}` |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (this.shadow) { |
|---|
| | | clazz += ' tn-avatar--shadow' |
|---|
| | | } |
|---|
| | | |
|---|
| | | return clazz |
|---|
| | | }, |
|---|
| | | avatarStyle() { |
|---|
| | | let style = {} |
|---|
| | | |
|---|
| | | if (this.backgroundColorStyle) { |
|---|
| | | style.background = this.backgroundColorStyle |
|---|
| | | } else if (this.shadow && this.showImg) { |
|---|
| | | style.backgroundImage = `url(${this.src})` |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (this.border) { |
|---|
| | | style.border = `${this.borderSize}rpx solid ${this.borderColor}` |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (!this._checkSizeIsInline()) { |
|---|
| | | style.width = this.size |
|---|
| | | style.height = this.size |
|---|
| | | } |
|---|
| | | |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | imgClass() { |
|---|
| | | let clazz = '' |
|---|
| | | clazz += ` tn-avatar__img--${this.shape}` |
|---|
| | | |
|---|
| | | return clazz |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // å è½½å¾ç失败 |
|---|
| | | loadImageError() { |
|---|
| | | this.imgLoadError = true |
|---|
| | | }, |
|---|
| | | // ç¹å»äºä»¶ |
|---|
| | | click() { |
|---|
| | | this.$emit("click", this.index) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // æ£æ¥æ¯å¦ä½¿ç¨å
ç½®ç大å°è¿è¡è®¾ç½® |
|---|
| | | _checkSizeIsInline() { |
|---|
| | | if (/^(xs|sm|md|lg|xl|xxl)$/.test(this.size)) return true |
|---|
| | | else return false |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | |
|---|
| | | .tn-avatar { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: inline-flex; |
|---|
| | | /* #endif */ |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | text-align: center; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | background-color: $tn-font-holder-color; |
|---|
| | | // color: #FFFFFF; |
|---|
| | | white-space: nowrap; |
|---|
| | | position: relative; |
|---|
| | | width: 64rpx; |
|---|
| | | height: 64rpx; |
|---|
| | | z-index: 1; |
|---|
| | | |
|---|
| | | &--sm { |
|---|
| | | width: 48rpx; |
|---|
| | | height: 48rpx; |
|---|
| | | } |
|---|
| | | &--lg { |
|---|
| | | width: 96rpx; |
|---|
| | | height: 96rpx; |
|---|
| | | } |
|---|
| | | &--xl { |
|---|
| | | width: 128rpx; |
|---|
| | | height: 128rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--square { |
|---|
| | | border-radius: 10rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--circle { |
|---|
| | | border-radius: 5000rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--shadow { |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | &::after { |
|---|
| | | content: " "; |
|---|
| | | display: block; |
|---|
| | | background: inherit; |
|---|
| | | filter: blur(10rpx); |
|---|
| | | position: absolute; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | top: 10rpx; |
|---|
| | | left: 10rpx; |
|---|
| | | z-index: -1; |
|---|
| | | opacity: 0.4; |
|---|
| | | transform-origin: 0 0; |
|---|
| | | border-radius: inherit; |
|---|
| | | transform: scale(1, 1); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__img { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | |
|---|
| | | &--square { |
|---|
| | | border-radius: 10rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--circle { |
|---|
| | | border-radius: 5000rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="tn-badge-class tn-badge" |
|---|
| | | :class="[ |
|---|
| | | backgroundColorClass, |
|---|
| | | fontColorClass, |
|---|
| | | badgeClass |
|---|
| | | ]" |
|---|
| | | :style="[badgeStyle]" |
|---|
| | | @click="handleClick" |
|---|
| | | > |
|---|
| | | <slot v-if="!dot"></slot> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import componentsColorMixin from '../../libs/mixin/components_color.js' |
|---|
| | | export default { |
|---|
| | | mixins: [componentsColorMixin], |
|---|
| | | name: 'tn-badge', |
|---|
| | | props: { |
|---|
| | | // åºå· |
|---|
| | | index: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: '0' |
|---|
| | | }, |
|---|
| | | // å¾½ç« çå¤§å° rpx |
|---|
| | | radius: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // å
è¾¹è· |
|---|
| | | padding: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // å¤è¾¹è· |
|---|
| | | margin: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // æ¯å¦ä¸ºä¸ä¸ªç¹ |
|---|
| | | dot: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // æ¯å¦ä½¿ç¨ç»å¯¹å®ä½ |
|---|
| | | absolute: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // top |
|---|
| | | top: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // right |
|---|
| | | right: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // å±
ä¸ å¯¹é½å³ä¸è§ |
|---|
| | | translateCenter: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | badgeClass() { |
|---|
| | | let clazz = '' |
|---|
| | | if (this.dot) { |
|---|
| | | clazz += ' tn-badge--dot' |
|---|
| | | } |
|---|
| | | if (this.absolute) { |
|---|
| | | clazz += ' tn-badge--absolute' |
|---|
| | | |
|---|
| | | if (this.translateCenter) { |
|---|
| | | clazz += ' tn-badge--center-position' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | return clazz |
|---|
| | | }, |
|---|
| | | badgeStyle() { |
|---|
| | | let style = {} |
|---|
| | | |
|---|
| | | if (this.radius !== 0) { |
|---|
| | | style.width = this.radius + 'rpx' |
|---|
| | | style.height = this.radius + 'rpx' |
|---|
| | | style.lineHeight = this.radius + 'rpx' |
|---|
| | | |
|---|
| | | // style.borderRadius = (this.radius * 8) + 'rpx' |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (this.padding) { |
|---|
| | | style.padding = this.padding |
|---|
| | | } |
|---|
| | | if (this.margin) { |
|---|
| | | style.margin = this.margin |
|---|
| | | } |
|---|
| | | if (this.fontColorStyle) { |
|---|
| | | style.color = this.fontColorStyle |
|---|
| | | } |
|---|
| | | if (this.fontSize) { |
|---|
| | | style.fontSize = this.fontSize + this.fontUnit |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (this.backgroundColorStyle) { |
|---|
| | | style.backgroundColor = this.backgroundColorStyle |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (this.top) { |
|---|
| | | style.top = this.$t.string.getLengthUnitValue(this.top) |
|---|
| | | } |
|---|
| | | if (this.right) { |
|---|
| | | style.right = this.$t.string.getLengthUnitValue(this.right) |
|---|
| | | } |
|---|
| | | |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // å¤çç¹å»äºä»¶ |
|---|
| | | handleClick() { |
|---|
| | | this.$emit('click', { |
|---|
| | | index: Number(this.index) |
|---|
| | | }) |
|---|
| | | this.$emit('tap', { |
|---|
| | | index: Number(this.index) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .tn-badge { |
|---|
| | | width: auto; |
|---|
| | | height: auto; |
|---|
| | | box-sizing: border-box; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | z-index: 10; |
|---|
| | | font-size: 20rpx; |
|---|
| | | background-color: #FFFFFF; |
|---|
| | | // color: #FFFFFF; |
|---|
| | | border-radius: 100rpx; |
|---|
| | | padding: 4rpx 8rpx; |
|---|
| | | line-height: initial; |
|---|
| | | |
|---|
| | | &--dot { |
|---|
| | | width: 8rpx; |
|---|
| | | height: 8rpx; |
|---|
| | | border-radius: 50%; |
|---|
| | | padding: 0; |
|---|
| | | } |
|---|
| | | &--absolute { |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | right: 0; |
|---|
| | | } |
|---|
| | | &--center-position { |
|---|
| | | transform: translate(50%, -50%); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <button |
|---|
| | | class="tn-btn-class tn-btn" |
|---|
| | | :class="[ |
|---|
| | | buttonClass, |
|---|
| | | backgroundColorClass, |
|---|
| | | fontColorClass |
|---|
| | | ]" |
|---|
| | | :style="[buttonStyle]" |
|---|
| | | hover-class="tn-hover" |
|---|
| | | :loading="loading" |
|---|
| | | :disabled="disabled" |
|---|
| | | :form-type="formType" |
|---|
| | | :open-type="openType" |
|---|
| | | @getuserinfo="handleGetUserInfo" |
|---|
| | | @getphonenumber="handleGetPhoneNumber" |
|---|
| | | @contact="handleContact" |
|---|
| | | @error="handleError" |
|---|
| | | @tap="handleClick" |
|---|
| | | > |
|---|
| | | <slot></slot> |
|---|
| | | </button> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import componentsColorMixin from '../../libs/mixin/components_color.js' |
|---|
| | | export default { |
|---|
| | | mixins: [componentsColorMixin], |
|---|
| | | name: "tn-button", |
|---|
| | | // 解å³å微信å°ç¨åºç§ï¼èªå®ä¹æé®æ æ³è§¦åbindsubmit |
|---|
| | | behaviors: ['wx://form-field-button'], |
|---|
| | | props: { |
|---|
| | | // æé®ç´¢å¼ï¼ç¨äºåºåå¤ä¸ªæé® |
|---|
| | | index: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // æé®å½¢ç¶ default é»è®¤ round åè§ icon å¾æ æé® |
|---|
| | | shape: { |
|---|
| | | type: String, |
|---|
| | | default: 'default' |
|---|
| | | }, |
|---|
| | | // æ¯å¦å é´å½± |
|---|
| | | shadow: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // 宽度 rpxæ% |
|---|
| | | width: { |
|---|
| | | type: String, |
|---|
| | | default: 'auto' |
|---|
| | | }, |
|---|
| | | // é«åº¦ rpxæ% |
|---|
| | | height: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // æé®ç尺寸 sm lg |
|---|
| | | size: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // åä½æ¯å¦å ç² |
|---|
| | | fontBold: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | padding: { |
|---|
| | | type: String, |
|---|
| | | default: '0 30rpx' |
|---|
| | | }, |
|---|
| | | // å¤è¾¹è· ä¸cssçmarginåæ°ç¨æ³ç¸å |
|---|
| | | margin: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // æ¯å¦é空 |
|---|
| | | plain: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // å½plain=trueæ¶ï¼æ¯å¦æ¾ç¤ºè¾¹æ¡ |
|---|
| | | border: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // å½plain=trueæ¶ï¼æ¯å¦å ç²æ¾ç¤ºè¾¹æ¡ |
|---|
| | | borderBold: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç¦ç¨ |
|---|
| | | disabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå è½½å¾æ |
|---|
| | | loading: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // 触åform表åçäºä»¶ç±»å |
|---|
| | | formType: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // å¼æ¾è½å |
|---|
| | | openType: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // æ¯å¦é»æ¢éå¤ç¹å»(é»è®¤é´éæ¯200ms) |
|---|
| | | blockRepeatClick: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // æ ¹æ®ä¸åçåæ°å¨æçæclass |
|---|
| | | buttonClass() { |
|---|
| | | let clazz = '' |
|---|
| | | // æé®å½¢ç¶ |
|---|
| | | switch (this.shape) { |
|---|
| | | case 'icon': |
|---|
| | | case 'round': |
|---|
| | | clazz += ' tn-round' |
|---|
| | | break |
|---|
| | | } |
|---|
| | | |
|---|
| | | // é´å½± |
|---|
| | | if (this.shadow) { |
|---|
| | | if (this.backgroundColorClass !== '' && this.backgroundColorClass.indexOf('tn-bg') != -1) { |
|---|
| | | const color = this.backgroundColor.slice(this.backgroundColor.lastIndexOf('-') + 1) |
|---|
| | | clazz += ` tn-shadow-${color}` |
|---|
| | | } else { |
|---|
| | | clazz += ' tn-shadow-blur' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // åä½å ç² |
|---|
| | | if (this.fontBold) { |
|---|
| | | clazz += ' tn-text-bold' |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 设置为é空并ä¸è®¾ç½®é空便å¯æè¿è¡è®¾ç½® |
|---|
| | | if (this.plain) { |
|---|
| | | clazz += ' tn-btn--plain' |
|---|
| | | if (this.border) { |
|---|
| | | clazz += ' tn-border-solid' |
|---|
| | | if (this.borderBold) { |
|---|
| | | clazz += ' tn-bold-border' |
|---|
| | | } |
|---|
| | | if (this.backgroundColor !== '' && this.backgroundColor.includes('tn-bg')) { |
|---|
| | | const color = this.backgroundColor.slice(this.backgroundColor.lastIndexOf('-') + 1) |
|---|
| | | clazz += ` tn-border-${color}` |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | return clazz |
|---|
| | | }, |
|---|
| | | // æé®çæ ·å¼ |
|---|
| | | buttonStyle() { |
|---|
| | | let style = {} |
|---|
| | | switch(this.size) { |
|---|
| | | case 'sm': |
|---|
| | | style.padding = '0 20rpx' |
|---|
| | | style.fontSize = '22rpx' |
|---|
| | | style.height = this.height || '48rpx' |
|---|
| | | break |
|---|
| | | case 'lg': |
|---|
| | | style.padding = '0 40rpx' |
|---|
| | | style.fontSize = '32rpx' |
|---|
| | | style.height = this.height || '80rpx' |
|---|
| | | break |
|---|
| | | default : |
|---|
| | | style.padding = '0 30rpx' |
|---|
| | | style.fontSize = '28rpx' |
|---|
| | | style.height = this.height || '64rpx' |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ¯å¦æå¨è®¾ç½®äºå
è¾¹è· |
|---|
| | | if (this.padding) { |
|---|
| | | style.padding = this.padding |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ¯å¦æå¨è®¾ç½®å¤è¾¹è· |
|---|
| | | if (this.margin) { |
|---|
| | | style.margin = this.margin |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ¯å¦æå¨è®¾ç½®äºåä½å¤§å° |
|---|
| | | if (this.fontSize) { |
|---|
| | | style.fontSize = this.fontSize + this.fontUnit |
|---|
| | | } |
|---|
| | | style.width = this.shape === 'icon' ? style.height : this.width |
|---|
| | | style.padding = this.shape === 'icon' ? '0' : style.padding |
|---|
| | | |
|---|
| | | if (this.fontColorStyle) { |
|---|
| | | style.color = this.fontColorStyle |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (!this.backgroundColorClass) { |
|---|
| | | if (this.plain) { |
|---|
| | | style.borderColor = this.backgroundColorStyle || '#080808' |
|---|
| | | } else { |
|---|
| | | style.backgroundColor = this.backgroundColorStyle || '#FFFFFF' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 设置é´å½± |
|---|
| | | if (this.shadow && !this.backgroundColorClass) { |
|---|
| | | if (this.backgroundColorStyle.indexOf('#') != -1) { |
|---|
| | | style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || '#000000')}10` |
|---|
| | | } else if (this.backgroundColorStyle.indexOf('rgb') != -1 || this.backgroundColorStyle.indexOf('rgba') != -1 || !this.backgroundColorStyle) { |
|---|
| | | style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || 'rgba(0, 0, 0, 0.1)')}` |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // ä¸æ¬¡ç¹å»çæ¶é´ |
|---|
| | | clickTime: 0, |
|---|
| | | // 两次ç¹å»é²æçé´éæ¶é´ |
|---|
| | | clickIntervalTime: 200 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // æé®ç¹å»äºä»¶ |
|---|
| | | handleClick() { |
|---|
| | | if (this.disabled) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | if (this.blockRepeatClick) { |
|---|
| | | const nowTime = new Date().getTime() |
|---|
| | | if (nowTime - this.clickTime <= this.clickIntervalTime) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.clickTime = nowTime |
|---|
| | | setTimeout(() => { |
|---|
| | | this.clickTime = 0 |
|---|
| | | }, this.clickIntervalTime) |
|---|
| | | } |
|---|
| | | this.$emit('click', { |
|---|
| | | index: Number(this.index) |
|---|
| | | }) |
|---|
| | | // å
¼å®¹tapäºä»¶ |
|---|
| | | this.$emit('tap', { |
|---|
| | | index: Number(this.index) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | handleGetUserInfo({ detail = {} } = {}) { |
|---|
| | | this.$emit('getuserinfo', detail); |
|---|
| | | }, |
|---|
| | | handleContact({ detail = {} } = {}) { |
|---|
| | | this.$emit('contact', detail); |
|---|
| | | }, |
|---|
| | | handleGetPhoneNumber({ detail = {} } = {}) { |
|---|
| | | this.$emit('getphonenumber', detail); |
|---|
| | | }, |
|---|
| | | handleError({ detail = {} } = {}) { |
|---|
| | | this.$emit('error', detail); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | |
|---|
| | | .tn-btn { |
|---|
| | | position: relative; |
|---|
| | | display: inline-flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | box-sizing: border-box; |
|---|
| | | line-height: 1; |
|---|
| | | text-align: center; |
|---|
| | | text-decoration: none; |
|---|
| | | overflow: visible; |
|---|
| | | transform: translate(0rpx, 0rpx); |
|---|
| | | // background-color: $tn-mai |
|---|
| | | border-radius: 12rpx; |
|---|
| | | // color: $tn-font-color; |
|---|
| | | margin: 0; |
|---|
| | | |
|---|
| | | &--plain { |
|---|
| | | background-color: transparent !important; |
|---|
| | | background-image: none; |
|---|
| | | |
|---|
| | | &.tn-round { |
|---|
| | | border-radius: 1000rpx !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <tn-popup |
|---|
| | | v-model="value" |
|---|
| | | mode="bottom" |
|---|
| | | :popup="false" |
|---|
| | | length="auto" |
|---|
| | | :borderRadius="borderRadius" |
|---|
| | | :safeAreaInsetBottom="safeAreaInsetBottom" |
|---|
| | | :maskCloseable="maskCloseable" |
|---|
| | | :closeBtn="closeBtn" |
|---|
| | | :zIndex="elIndex" |
|---|
| | | @close="close" |
|---|
| | | > |
|---|
| | | <view class="tn-calendar-class tn-calendar"> |
|---|
| | | <!-- å¤´é¨ --> |
|---|
| | | <view class="tn-calendar__header"> |
|---|
| | | <view v-if="!$slots.tooltip || !$slots.$tooltip" class="tn-calendar__header__text"> |
|---|
| | | {{ toolTips }} |
|---|
| | | </view> |
|---|
| | | <view v-else> |
|---|
| | | <slot name="tooltip"></slot> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <!-- æä½æç¤ºä¿¡æ¯ --> |
|---|
| | | <view class="tn-calendar__action"> |
|---|
| | | <view v-if="changeYear" class="tn-calendar__action__icon" :style="{backgroundColor: yearArrowColor}" @tap.stop="changeYearHandler(false)"> |
|---|
| | | <view><text class="tn-icon-left"></text></view> |
|---|
| | | </view> |
|---|
| | | <view v-if="changeMonth" class="tn-calendar__action__icon" :style="{backgroundColor: monthArrowColor}" @tap.stop="changeMonthHandler(false)"> |
|---|
| | | <view><text class="tn-icon-left"></text></view> |
|---|
| | | </view> |
|---|
| | | <view class="tn-calendar__action__text">{{ dateTitle }}</view> |
|---|
| | | <view v-if="changeMonth" class="tn-calendar__action__icon" :style="{backgroundColor: monthArrowColor}" @tap.stop="changeMonthHandler(true)"> |
|---|
| | | <view><text class="tn-icon-right"></text></view> |
|---|
| | | </view> |
|---|
| | | <view v-if="changeYear" class="tn-calendar__action__icon" :style="{backgroundColor: yearArrowColor}" @tap.stop="changeYearHandler(true)"> |
|---|
| | | <view><text class="tn-icon-right"></text></view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <!-- ææä¸ææ è¯ --> |
|---|
| | | <view class="tn-calendar__week-day-zh"> |
|---|
| | | <view v-for="(item,index) in weekDayZh" :key="index" class="tn-calendar__week-day-zh__text">{{ item }}</view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <!-- æ¥åä¸»ä½ --> |
|---|
| | | <view class="tn-calendar__content"> |
|---|
| | | <!-- å置空ç½é¨å --> |
|---|
| | | <block v-for="(item, index) in weekdayArr" :key="index"> |
|---|
| | | <view class="tn-calendar__content__item"></view> |
|---|
| | | </block> |
|---|
| | | <view |
|---|
| | | v-for="(item, index) in daysArr" |
|---|
| | | :key="index" |
|---|
| | | class="tn-calendar__content__item" |
|---|
| | | :class="{ |
|---|
| | | 'tn-hover': disabledChoose(year, month, index + 1), |
|---|
| | | 'tn-calendar__content--start-date': (mode === 'range' && startDate == `${year}-${month}-${index+1}`) || mode === 'date', |
|---|
| | | 'tn-calendar__content--end-date': (mode === 'range' && endDate == `${year}-${month}-${index+1}`) || mode === 'date' |
|---|
| | | }" |
|---|
| | | :style="{ |
|---|
| | | backgroundColor: colorValue(index, 'bg') |
|---|
| | | }" |
|---|
| | | @tap.stop="dateClick(index)" |
|---|
| | | > |
|---|
| | | <view class="tn-calendar__content__item__text" :style="{color: colorValue(index, 'text')}"> |
|---|
| | | <view>{{ item.day }}</view> |
|---|
| | | </view> |
|---|
| | | <view class="tn-calendar__content__item__tips" :style="{color: item.color}"> |
|---|
| | | {{ item.bottomInfo }} |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <view class="tn-calendar__content__month--bg">{{ month }}</view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <!-- åºé¨ --> |
|---|
| | | <view class="tn-calendar__bottom"> |
|---|
| | | <view class="tn-calendar__bottom__choose"> |
|---|
| | | <text>{{ mode === 'date' ? activeDate : startDate }}</text> |
|---|
| | | <text v-if="endDate">è³{{ endDate }}</text> |
|---|
| | | </view> |
|---|
| | | <view class="tn-calendar__bottom__btn" :style="{backgroundColor: btnColor}" @click="handleBtnClick(false)"> |
|---|
| | | <view class="tn-calendar__bottom__btn--text">ç¡®å®</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </tn-popup> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import Calendar from '../../libs/utils/calendar.js' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'tn-calendar', |
|---|
| | | props: { |
|---|
| | | // ååç»å®æ§å¶ç»ä»¶å¼¹åºä¸æ¶èµ· |
|---|
| | | value: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // æ¨¡å¼ |
|---|
| | | // date -> åæ¥æ range -> æ¥æèå´ |
|---|
| | | mode: { |
|---|
| | | type: String, |
|---|
| | | default: 'date' |
|---|
| | | }, |
|---|
| | | // æ¯å¦å
许åæ¢å¹´ä»½ |
|---|
| | | changeYear: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ¯å¦å
许åæ¢æ份 |
|---|
| | | changeMonth: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // å¯åæ¢çæ大年份 |
|---|
| | | maxYear: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 2100 |
|---|
| | | }, |
|---|
| | | // å¯åæ¢çæå°å¹´ä»½ |
|---|
| | | minYear: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 1970 |
|---|
| | | }, |
|---|
| | | // æå°æ¥æ(ä¸å¨èå´è¢«ä¸å
许éæ©) |
|---|
| | | minDate: { |
|---|
| | | type: String, |
|---|
| | | default: '1970-01-01' |
|---|
| | | }, |
|---|
| | | // æ大æ¥æï¼å¦æ为空åé»è®¤ä¸ºä»å¤© |
|---|
| | | maxDate: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // åæ¢æ份æé®çé¢è² |
|---|
| | | monthArrowColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#AAAAAA' |
|---|
| | | }, |
|---|
| | | // åæ¢å¹´ä»½æé®çé¢è² |
|---|
| | | yearArrowColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#C8C8C8' |
|---|
| | | }, |
|---|
| | | // é»è®¤åä½é¢è² |
|---|
| | | color: { |
|---|
| | | type: String, |
|---|
| | | default: '#080808' |
|---|
| | | }, |
|---|
| | | // éä¸|èµ·å§ç»ææ¥æèæ¯é¢è² |
|---|
| | | activeBgColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#01BEFF' |
|---|
| | | }, |
|---|
| | | // éä¸|èµ·å§ç»ææ¥ææåé¢è² |
|---|
| | | activeColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#FFFFFF' |
|---|
| | | }, |
|---|
| | | // èå´æ¥æå
çèæ¯é¢è² |
|---|
| | | rangeBgColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#E6E6E655' |
|---|
| | | }, |
|---|
| | | // èå´æ¥æå
çæåé¢è² |
|---|
| | | rangeColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#01BEFF' |
|---|
| | | }, |
|---|
| | | // èµ·å§æ¥ææ¾ç¤ºçæåï¼mode=rangeæ¶çæ |
|---|
| | | startText: { |
|---|
| | | type: String, |
|---|
| | | default: 'å¼å§' |
|---|
| | | }, |
|---|
| | | // ç»ææ¥ææ¾ç¤ºçæåï¼mode=rangeæ¶çæ |
|---|
| | | endText: { |
|---|
| | | type: String, |
|---|
| | | default: 'ç»æ' |
|---|
| | | }, |
|---|
| | | // æé®èæ¯é¢è² |
|---|
| | | btnColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#01BEFF' |
|---|
| | | }, |
|---|
| | | // ååæåçé¢è² |
|---|
| | | lunarColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#AAAAAA' |
|---|
| | | }, |
|---|
| | | // éä¸æ¥ææ¯å¦æéä¸ææ |
|---|
| | | isActiveCurrent: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // åæ¢å¹´ææ¯å¦è§¦åäºä»¶ï¼mode=dateæ¶çæ |
|---|
| | | isChange: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºåå |
|---|
| | | showLunar: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // 顶é¨æ示æå |
|---|
| | | toolTips: { |
|---|
| | | type: String, |
|---|
| | | default: '请éæ©æ¥æ' |
|---|
| | | }, |
|---|
| | | // æ¾ç¤ºåè§çå¤§å° |
|---|
| | | borderRadius: { |
|---|
| | | type: Number, |
|---|
| | | default: 8 |
|---|
| | | }, |
|---|
| | | // æ¯å¦å¼å¯åºé¨å®å
¨åºéé
ï¼å¼å¯çè¯ï¼ä¼å¨iPhoneXæºååºé¨æ·»å ä¸å®çå
è¾¹è· |
|---|
| | | safeAreaInsetBottom: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // æ¯å¦å¯ä»¥éè¿ç¹å»é®ç½©è¿è¡å
³é |
|---|
| | | maskCloseable: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // zIndex |
|---|
| | | zIndex: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå
³éæé® |
|---|
| | | closeBtn: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | dateChange() { |
|---|
| | | return `${this.mode}-${this.minDate}-${this.maxDate}` |
|---|
| | | }, |
|---|
| | | elIndex() { |
|---|
| | | return this.zIndex ? this.zIndex : this.$t.zIndex.popup |
|---|
| | | }, |
|---|
| | | colorValue() { |
|---|
| | | return (index, type) => { |
|---|
| | | let color = type === 'bg' ? '' : this.color |
|---|
| | | let day = index + 1 |
|---|
| | | let date = `${this.year}-${this.month}-${day}` |
|---|
| | | let timestamp = new Date(date.replace(/\-/g,'/')).getTime() |
|---|
| | | let start = this.startDate.replace(/\-/g,'/') |
|---|
| | | let end = this.endDate.replace(/\-/g,'/') |
|---|
| | | if ((this.mode === 'date' && this.isActiveCurrent && this.activeDate == date) || this.startDate == date || this.endDate == date) { |
|---|
| | | color = type === 'bg' ? this.activeBgColor : this.activeColor |
|---|
| | | } else if (this.endDate && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) { |
|---|
| | | color = type === 'bg' ? this.rangeBgColor : this.rangeColor |
|---|
| | | } |
|---|
| | | return color |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // ææå ï¼1-7 |
|---|
| | | weekday: 1, |
|---|
| | | weekdayArr: [], |
|---|
| | | // ææ对åºçä¸æ |
|---|
| | | weekDayZh: ['æ¥','ä¸','äº','ä¸','å','äº','å
'], |
|---|
| | | // å½åææå¤å°å¤© |
|---|
| | | days: 0, |
|---|
| | | daysArr: [], |
|---|
| | | year: 2021, |
|---|
| | | month: 0, |
|---|
| | | day: 0, |
|---|
| | | startYear: 0, |
|---|
| | | startMonth: 0, |
|---|
| | | startDay: 0, |
|---|
| | | endYear: 0, |
|---|
| | | endMonth: 0, |
|---|
| | | endDay: 0, |
|---|
| | | today: '', |
|---|
| | | activeDate: '', |
|---|
| | | startDate: '', |
|---|
| | | endDate: '', |
|---|
| | | min: null, |
|---|
| | | max: null, |
|---|
| | | // æ¥ææ é¢ |
|---|
| | | dateTitle: '', |
|---|
| | | // æ è®°æ¯å¦å·²ç»éæ©äºå¼å§æ¥æ |
|---|
| | | chooseStart: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | dateChange() { |
|---|
| | | this.init() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.init() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // åå§å |
|---|
| | | init() { |
|---|
| | | let now = new Date() |
|---|
| | | this.year = now.getFullYear() |
|---|
| | | this.month = now.getMonth() + 1 |
|---|
| | | this.day = now.getDate() |
|---|
| | | this.today = `${this.year}-${this.month}-${this.day}` |
|---|
| | | this.activeDate = this.today |
|---|
| | | this.min = this.initDate(this.minDate) |
|---|
| | | this.max = this.initDate(this.maxDate || this.today) |
|---|
| | | this.startDate = '' |
|---|
| | | this.startYear = 0 |
|---|
| | | this.startMonth = 0 |
|---|
| | | this.startDay = 0 |
|---|
| | | this.endDate = '' |
|---|
| | | this.endYear = 0 |
|---|
| | | this.endMonth = 0 |
|---|
| | | this.endDay = 0 |
|---|
| | | this.chooseStart = false |
|---|
| | | this.changeData() |
|---|
| | | }, |
|---|
| | | // åæ¢æ份 |
|---|
| | | changeMonthHandler(add) { |
|---|
| | | if (add) { |
|---|
| | | let month = this.month + 1 |
|---|
| | | let year = month > 12 ? this.year + 1 : this.year |
|---|
| | | if (!this.checkRange(year)) { |
|---|
| | | this.month = month > 12 ? 1 : month |
|---|
| | | this.year = year |
|---|
| | | this.changeData() |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | let month = this.month - 1 |
|---|
| | | let year = month < 1 ? this.year - 1 : this.year |
|---|
| | | if (!this.checkRange(year)) { |
|---|
| | | this.month = month < 1 ? 12 : month |
|---|
| | | this.year = year |
|---|
| | | this.changeData() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // åæ¢å¹´ä»½ |
|---|
| | | changeYearHandler(add) { |
|---|
| | | let year = add ? this.year + 1 : this.year - 1 |
|---|
| | | if (!this.checkRange(year)) { |
|---|
| | | this.year = year |
|---|
| | | this.changeData() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ¥æç¹å»äºä»¶ |
|---|
| | | dateClick(day) { |
|---|
| | | day += 1 |
|---|
| | | if (!this.disabledChoose(this.year, this.month, day)) { |
|---|
| | | this.day = day |
|---|
| | | let date = `${this.year}-${this.month}-${day}` |
|---|
| | | if (this.mode === 'date') { |
|---|
| | | this.activeDate = date |
|---|
| | | } else { |
|---|
| | | let startTimeCompare = new Date(date.replace(/\-/g,'/')).getTime() < new Date(this.startDate.replace(/\-/g,'/')).getTime() |
|---|
| | | if (!this.chooseStart || startTimeCompare) { |
|---|
| | | this.startDate = date |
|---|
| | | this.startYear = this.year |
|---|
| | | this.startMonth = this.month |
|---|
| | | this.startDay = this.day |
|---|
| | | this.endYear = 0 |
|---|
| | | this.endMonth = 0 |
|---|
| | | this.endDay = 0 |
|---|
| | | this.endDate = '' |
|---|
| | | this.activeDate = '' |
|---|
| | | this.chooseStart = true |
|---|
| | | } else { |
|---|
| | | this.endDate = date |
|---|
| | | this.endYear = this.year |
|---|
| | | this.endMonth = this.month |
|---|
| | | this.endDay = this.day |
|---|
| | | this.chooseStart = false |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.daysArr = this.handleDaysArr() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // ä¿®æ¹æ¥ææ°æ® |
|---|
| | | changeData() { |
|---|
| | | this.days = this.getMonthDay(this.year, this.month) |
|---|
| | | this.daysArr = this.handleDaysArr() |
|---|
| | | this.weekday = this.getMonthFirstWeekDay(this.year, this.month) |
|---|
| | | this.weekdayArr = this.generateArray(1, this.weekday) |
|---|
| | | this.dateTitle = `${this.year}å¹´${this.month}æ` |
|---|
| | | if (this.isChange && this.mode === 'date') { |
|---|
| | | this.handleBtnClick(true) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // å¤çæé®ç¹å» |
|---|
| | | handleBtnClick(show) { |
|---|
| | | if (!show) { |
|---|
| | | this.close() |
|---|
| | | } |
|---|
| | | if (this.mode === 'date') { |
|---|
| | | let arr = this.activeDate.split('-') |
|---|
| | | let year = this.isChange ? this.year : Number(arr[0]) |
|---|
| | | let month = this.isChange ? this.month : Number(arr[1]) |
|---|
| | | let day = this.isChange ? this.day : Number(arr[2]) |
|---|
| | | let days = this.getMonthDay(year, month) |
|---|
| | | let result = `${year}-${this.formatNumber(month)}-${this.formatNumber(day)}` |
|---|
| | | let weekText = this.getWeekText(result) |
|---|
| | | let isToday = false |
|---|
| | | if (`${year}-${month}-${day}` === this.today) { |
|---|
| | | isToday = true |
|---|
| | | } |
|---|
| | | this.$emit('change', { |
|---|
| | | year, |
|---|
| | | month, |
|---|
| | | day, |
|---|
| | | days, |
|---|
| | | week: weekText, |
|---|
| | | isToday, |
|---|
| | | date: result, |
|---|
| | | // æ¯å¦ä¸ºåæ¢å¹´ææä½ |
|---|
| | | switch: show |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | if (!this.startDate || !this.endDate) return |
|---|
| | | |
|---|
| | | let startMonth = this.formatNumber(this.startMonth) |
|---|
| | | let startDay = this.formatNumber(this.startDay) |
|---|
| | | let startDate = `${this.startYear}-${startMonth}-${startDay}` |
|---|
| | | let startWeek = this.getWeekText(startDate) |
|---|
| | | |
|---|
| | | let endMonth = this.formatNumber(this.endMonth) |
|---|
| | | let endDay = this.formatNumber(this.endDay) |
|---|
| | | let endDate = `${this.endYear}-${endMonth}-${endDay}` |
|---|
| | | let endWeek = this.getWeekText(endDate) |
|---|
| | | |
|---|
| | | this.$emit('change', { |
|---|
| | | startYear: this.startYear, |
|---|
| | | startMonth: this.startMonth, |
|---|
| | | startDay: this.startDay, |
|---|
| | | startDate, |
|---|
| | | startWeek, |
|---|
| | | endYear: this.endYear, |
|---|
| | | endMonth: this.endMonth, |
|---|
| | | endDay: this.endDay, |
|---|
| | | endDate, |
|---|
| | | endWeek |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // å¤ææ¯å¦å
许éæ© |
|---|
| | | disabledChoose(year, month, day) { |
|---|
| | | let flag = true |
|---|
| | | let date = `${year}/${month}/${day}` |
|---|
| | | let min = `${this.min.year}/${this.min.month}/${this.min.day}` |
|---|
| | | let max = `${this.max.year}/${this.max.month}/${this.max.day}` |
|---|
| | | let timestamp = new Date(date).getTime() |
|---|
| | | if (timestamp >= new Date(min).getTime() && timestamp <= new Date(max).getTime()) { |
|---|
| | | flag = false |
|---|
| | | } |
|---|
| | | return flag |
|---|
| | | }, |
|---|
| | | // æ£æ¥æ¯å¦å¨æ¥æèå´å
|
|---|
| | | checkRange(year) { |
|---|
| | | let overstep = false |
|---|
| | | if (year < this.minYear || year > this.maxYear) { |
|---|
| | | uni.showToast({ |
|---|
| | | title: 'æéæ¥æè¶
åºèå´', |
|---|
| | | icon: 'none' |
|---|
| | | }) |
|---|
| | | overstep = true |
|---|
| | | } |
|---|
| | | return overstep |
|---|
| | | }, |
|---|
| | | // å¤çæ¥æ |
|---|
| | | initDate(date) { |
|---|
| | | let fdate = date.split('-') |
|---|
| | | return { |
|---|
| | | year: Number(fdate[0] || 1970), |
|---|
| | | month: Number(fdate[1] || 1), |
|---|
| | | day: Number(fdate[2] || 1) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // å¤çæ¥ææ°ç» |
|---|
| | | handleDaysArr() { |
|---|
| | | let days = this.generateArray(1, this.days) |
|---|
| | | let daysArr = days.map((item) => { |
|---|
| | | let bottomInfo = this.showLunar ? Calendar.solar2lunar(this.year, this.month, item).IDayCn : '' |
|---|
| | | let color = this.showLunar ? this.lunarColor : this.activeColor |
|---|
| | | if ( |
|---|
| | | (this.mode === 'date' && this.day == item) || |
|---|
| | | (this.mode === 'range' && (this.startDay == item || this.endDay == item)) |
|---|
| | | ) { |
|---|
| | | color = this.activeColor |
|---|
| | | } |
|---|
| | | if (this.mode === 'range') { |
|---|
| | | if (this.startDay == item && this.startDay != this.endDay) { |
|---|
| | | bottomInfo = this.startText |
|---|
| | | } |
|---|
| | | if (this.endDay == item) { |
|---|
| | | bottomInfo = this.endText |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | return { |
|---|
| | | day: item, |
|---|
| | | color: color, |
|---|
| | | bottomInfo: bottomInfo |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | return daysArr |
|---|
| | | }, |
|---|
| | | // è·å对åºææå¤å°å¤© |
|---|
| | | getMonthDay(year, month) { |
|---|
| | | return new Date(year, month, 0).getDate() |
|---|
| | | }, |
|---|
| | | // è·å对åºæç第ä¸å¤©æ¶ææå |
|---|
| | | getMonthFirstWeekDay(year, month) { |
|---|
| | | return new Date(`${year}/${month}/01 00:00:00`).getDay() |
|---|
| | | }, |
|---|
| | | // è·å对åºææçææ¬ |
|---|
| | | getWeekText(date) { |
|---|
| | | date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`) |
|---|
| | | let week = date.getDay() |
|---|
| | | return 'ææ' + this.weekDayZh[week] |
|---|
| | | }, |
|---|
| | | // çææ¥æ天æ°æ°ç» |
|---|
| | | generateArray(start, end) { |
|---|
| | | return Array.from(new Array(end + 1).keys()).slice(start) |
|---|
| | | }, |
|---|
| | | // æ ¼å¼åæ°å |
|---|
| | | formatNumber(num) { |
|---|
| | | return num < 10 ? '0' + num : num + '' |
|---|
| | | }, |
|---|
| | | // å
³éçªå£ |
|---|
| | | close() { |
|---|
| | | this.$emit('input', false) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | |
|---|
| | | .tn-calendar { |
|---|
| | | color: $tn-font-color; |
|---|
| | | |
|---|
| | | &__header { |
|---|
| | | width: 100%; |
|---|
| | | box-sizing: border-box; |
|---|
| | | font-size: 30rpx; |
|---|
| | | background-color: #FFFFFF; |
|---|
| | | color: $tn-main-color; |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | margin-top: 30rpx; |
|---|
| | | padding: 0 60rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__action { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | padding: 40rpx 0 40rpx 0; |
|---|
| | | |
|---|
| | | &__icon { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | margin: 0 16rpx; |
|---|
| | | width: 32rpx; |
|---|
| | | height: 32rpx; |
|---|
| | | font-size: 20rpx; |
|---|
| | | // line-height: 32rpx; |
|---|
| | | border-radius: 50%; |
|---|
| | | color: #FFFFFF; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | padding: 0 16rpx; |
|---|
| | | color: $tn-font-color; |
|---|
| | | font-size: 32rpx; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__week-day-zh { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | padding: 12rpx 0; |
|---|
| | | overflow: hidden; |
|---|
| | | box-shadow: 16rpx 6rpx 8rpx 0 #E6E6E6; |
|---|
| | | margin-bottom: 2rpx; |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | flex: 1; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__content { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | width: 100%; |
|---|
| | | padding: 12rpx 0; |
|---|
| | | box-sizing: border-box; |
|---|
| | | background-color: #F7F7F7; |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | width: 14.2857%; |
|---|
| | | padding: 12rpx 0; |
|---|
| | | margin: 6rpx 0; |
|---|
| | | overflow: hidden; |
|---|
| | | position: relative; |
|---|
| | | z-index: 2; |
|---|
| | | // box-shadow: inset 0rpx 0rpx 22rpx 4rpx rgba(255,255,255, 0.52); |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | height: 80rpx; |
|---|
| | | font-size: 32rpx; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__tips { |
|---|
| | | position: absolute; |
|---|
| | | width: 100%; |
|---|
| | | line-height: 24rpx; |
|---|
| | | left: 0; |
|---|
| | | bottom: 8rpx; |
|---|
| | | text-align: center; |
|---|
| | | z-index: 2; |
|---|
| | | transform-origin: center center; |
|---|
| | | transform: scale(0.8); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--start-date { |
|---|
| | | border-top-left-radius: 8rpx; |
|---|
| | | border-bottom-left-radius: 8rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--end-date { |
|---|
| | | border-top-right-radius: 8rpx; |
|---|
| | | border-bottom-right-radius: 8rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__month { |
|---|
| | | &--bg { |
|---|
| | | position: absolute; |
|---|
| | | font-size: 200rpx; |
|---|
| | | line-height: 200rpx; |
|---|
| | | left: 50%; |
|---|
| | | top: 50%; |
|---|
| | | transform: translate(-50%, -50%); |
|---|
| | | color: $tn-font-holder-color; |
|---|
| | | z-index: 1; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__bottom { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | width: 100%; |
|---|
| | | background-color: #F7F7F7; |
|---|
| | | padding: 0 40rpx 30rpx; |
|---|
| | | box-sizing: border-box; |
|---|
| | | font-size: 24rpx; |
|---|
| | | color: $tn-font-sub-color; |
|---|
| | | |
|---|
| | | &__choose { |
|---|
| | | height: 50rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__btn { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | width: 100%; |
|---|
| | | height: 60rpx; |
|---|
| | | border-radius: 40rpx; |
|---|
| | | color: #FFFFFF; |
|---|
| | | font-size: 28rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="tn-car-keyboard-class tn-car-keyboard" @touchmove.stop.prevent="() => {}"> |
|---|
| | | <view class="tn-car-keyboard__grids"> |
|---|
| | | |
|---|
| | | <view |
|---|
| | | v-for="(data, index) in inputCarNumber ? endKeyBoardList : areaList" |
|---|
| | | :key="index" |
|---|
| | | class="tn-car-keyboard__grids__item" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | v-for="(sub_data, sub_index) in data" |
|---|
| | | :key="sub_index" |
|---|
| | | class="tn-car-keyboard__grids__btn" |
|---|
| | | :class="{'tn-car-keyboard__grids__btn--disabled': sub_data === 'I'}" |
|---|
| | | :hover-class="sub_data !== 'I' ? 'tn-car-keyboard--hover' : ''" |
|---|
| | | :hover-stay-time="100" |
|---|
| | | @tap="click(index, sub_index)" |
|---|
| | | > |
|---|
| | | {{ sub_data }} |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <view |
|---|
| | | class="tn-car-keyboard__back" |
|---|
| | | hover-class="tn-hover-class" |
|---|
| | | :hover-stay-time="150" |
|---|
| | | @touchstart.stop="backspaceClick" |
|---|
| | | @touchend="clearTimer" |
|---|
| | | > |
|---|
| | | <view class="tn-icon-left-arrow tn-car-keyboard__back__icon"></view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <view |
|---|
| | | class="tn-car-keyboard__change" |
|---|
| | | hover-class="tn-car-keyboard--hover" |
|---|
| | | :hover-stay-time="150" |
|---|
| | | @tap="changeMode" |
|---|
| | | > |
|---|
| | | <text class="tn-car-keyboard__mode--zh" :class="[`tn-car-keyboard__mode--${!inputCarNumber ? 'active' : 'inactive'}`]">ä¸</text> |
|---|
| | | / |
|---|
| | | <text class="tn-car-keyboard__mode--en" :class="[`tn-car-keyboard__mode--${inputCarNumber ? 'active' : 'inactive'}`]">è±</text> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'tn-car-keyboard', |
|---|
| | | props: { |
|---|
| | | // æ¯å¦æä¹±é®çé¡ºåº |
|---|
| | | randomEnabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // åæ¢ä¸è±æè¾å
¥ |
|---|
| | | switchEnMode: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | areaList() { |
|---|
| | | let data = [ |
|---|
| | | '京', |
|---|
| | | '沪', |
|---|
| | | '粤', |
|---|
| | | 'æ´¥', |
|---|
| | | 'å', |
|---|
| | | '豫', |
|---|
| | | 'äº', |
|---|
| | | 'è¾½', |
|---|
| | | 'é»', |
|---|
| | | 'æ¹', |
|---|
| | | 'ç', |
|---|
| | | 'é²', |
|---|
| | | 'è', |
|---|
| | | 'æµ', |
|---|
| | | 'èµ£', |
|---|
| | | 'é', |
|---|
| | | 'æ¡', |
|---|
| | | 'ç', |
|---|
| | | 'æ', |
|---|
| | | 'é', |
|---|
| | | 'è', |
|---|
| | | 'å', |
|---|
| | | 'é½', |
|---|
| | | 'è´µ', |
|---|
| | | 'æ¸', |
|---|
| | | 'å·', |
|---|
| | | 'é', |
|---|
| | | 'ç¼', |
|---|
| | | 'å®', |
|---|
| | | 'è', |
|---|
| | | '港', |
|---|
| | | 'æ¾³', |
|---|
| | | 'æ°', |
|---|
| | | '使', |
|---|
| | | 'å¦', |
|---|
| | | '临', |
|---|
| | | 'è¦' |
|---|
| | | ] |
|---|
| | | // æä¹±é¡ºåº |
|---|
| | | if (this.randomEnabled) data = this.$t.array.random(data) |
|---|
| | | // åå²äºç»´æ°ç» |
|---|
| | | let showData = [] |
|---|
| | | showData[0] = data.slice(0, 10) |
|---|
| | | showData[1] = data.slice(10, 20) |
|---|
| | | showData[2] = data.slice(20, 30) |
|---|
| | | showData[3] = data.slice(30, 37) |
|---|
| | | return showData |
|---|
| | | }, |
|---|
| | | endKeyBoardList() { |
|---|
| | | let data = [ |
|---|
| | | 1, |
|---|
| | | 2, |
|---|
| | | 3, |
|---|
| | | 4, |
|---|
| | | 5, |
|---|
| | | 6, |
|---|
| | | 7, |
|---|
| | | 8, |
|---|
| | | 9, |
|---|
| | | 0, |
|---|
| | | 'Q', |
|---|
| | | 'W', |
|---|
| | | 'E', |
|---|
| | | 'R', |
|---|
| | | 'T', |
|---|
| | | 'Y', |
|---|
| | | 'U', |
|---|
| | | 'I', |
|---|
| | | 'O', |
|---|
| | | 'P', |
|---|
| | | 'A', |
|---|
| | | 'S', |
|---|
| | | 'D', |
|---|
| | | 'F', |
|---|
| | | 'G', |
|---|
| | | 'H', |
|---|
| | | 'J', |
|---|
| | | 'K', |
|---|
| | | 'L', |
|---|
| | | 'Z', |
|---|
| | | 'X', |
|---|
| | | 'C', |
|---|
| | | 'V', |
|---|
| | | 'B', |
|---|
| | | 'N', |
|---|
| | | 'M' |
|---|
| | | ] |
|---|
| | | // æä¹±é¡ºåº |
|---|
| | | if (this.randomEnabled) data = this.$t.array.random(data) |
|---|
| | | // åå²äºç»´æ°ç» |
|---|
| | | let showData = [] |
|---|
| | | showData[0] = data.slice(0, 10) |
|---|
| | | showData[1] = data.slice(10, 20) |
|---|
| | | showData[2] = data.slice(20, 29) |
|---|
| | | showData[3] = data.slice(29, 36) |
|---|
| | | return showData |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // æ è®°æ¯å¦è¾å
¥è½¦çå·ç |
|---|
| | | inputCarNumber: false, |
|---|
| | | // é¿æå¤æ¬¡å é¤äºä»¶çå¬ |
|---|
| | | longPressDeleteTimer: null |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch:{ |
|---|
| | | switchEnMode: { |
|---|
| | | handler(value) { |
|---|
| | | if (value) { |
|---|
| | | this.inputCarNumber = true |
|---|
| | | } else { |
|---|
| | | this.inputCarNumber = false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | immediate: true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // ç¹å»é®çæé® |
|---|
| | | click(i, j) { |
|---|
| | | let value = '' |
|---|
| | | // æ ¹æ®ä¸å模å¼è·åä¸åæ°ç»çå¼ |
|---|
| | | if (this.inputCarNumber) value = this.endKeyBoardList[i][j] |
|---|
| | | else value = this.areaList[i][j] |
|---|
| | | |
|---|
| | | // 车çéä¸å
å«I |
|---|
| | | if (value === 'I') return |
|---|
| | | |
|---|
| | | this.$emit('change', value) |
|---|
| | | }, |
|---|
| | | // ä¿®æ¹è¾å
¥æ¨¡å¼ |
|---|
| | | // ä¸æ/è±æ |
|---|
| | | changeMode() { |
|---|
| | | this.inputCarNumber = !this.inputCarNumber |
|---|
| | | }, |
|---|
| | | // ç¹å»éæ ¼ |
|---|
| | | backspaceClick() { |
|---|
| | | this.$emit('backspace') |
|---|
| | | this.clearTimer() |
|---|
| | | this.longPressDeleteTimer = setInterval(() => { |
|---|
| | | this.$emit('backspace') |
|---|
| | | }, 250) |
|---|
| | | }, |
|---|
| | | // æ¸
空å®æ¶å¨ |
|---|
| | | clearTimer() { |
|---|
| | | if (this.longPressDeleteTimer) { |
|---|
| | | clearInterval(this.longPressDeleteTimer) |
|---|
| | | this.longPressDeleteTimer = null |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | |
|---|
| | | .tn-car-keyboard { |
|---|
| | | position: relative; |
|---|
| | | padding: 24rpx 0; |
|---|
| | | background-color: #E6E6E6; |
|---|
| | | |
|---|
| | | &__grids { |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__btn { |
|---|
| | | display: inline-flex; |
|---|
| | | justify-content: center; |
|---|
| | | flex: 0 0 64rpx; |
|---|
| | | width: 62rpx; |
|---|
| | | height: 80rpx; |
|---|
| | | font-size: 38rpx; |
|---|
| | | line-height: 80rpx; |
|---|
| | | font-weight: 500; |
|---|
| | | text-decoration: none; |
|---|
| | | text-align: center; |
|---|
| | | background-color: #FFFFFF; |
|---|
| | | margin: 8rpx 5rpx; |
|---|
| | | border-radius: 8rpx; |
|---|
| | | box-shadow: 0 2rpx 0rpx $tn-box-shadow-color; |
|---|
| | | |
|---|
| | | &--disabled { |
|---|
| | | opacity: 0.6; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__back { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | position: absolute; |
|---|
| | | width: 96rpx; |
|---|
| | | height: 80rpx; |
|---|
| | | right: 22rpx; |
|---|
| | | bottom: 32rpx; |
|---|
| | | background-color: #E6E6E6; |
|---|
| | | border-radius: 8rpx; |
|---|
| | | box-shadow: 0 2rpx 0rpx $tn-box-shadow-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__change { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | position: absolute; |
|---|
| | | width: 96rpx; |
|---|
| | | height: 80rpx; |
|---|
| | | left: 22rpx; |
|---|
| | | bottom: 32rpx; |
|---|
| | | line-height: 1; |
|---|
| | | background-color: #FFFFFF; |
|---|
| | | border-radius: 8rpx; |
|---|
| | | box-shadow: 0 2rpx 0rpx $tn-box-shadow-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__mode { |
|---|
| | | &--zh { |
|---|
| | | transform: translateY(-10rpx); |
|---|
| | | } |
|---|
| | | &--en { |
|---|
| | | transform: translateY(10rpx); |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--active { |
|---|
| | | color: $tn-main-color; |
|---|
| | | font-size: 30rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--inactive { |
|---|
| | | &.tn-car-keyboard__mode--zh { |
|---|
| | | transform: scale(0.85) translateY(-10rpx); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--inactive { |
|---|
| | | &.tn-car-keyboard__mode--en { |
|---|
| | | transform: scale(0.85) translateY(10rpx); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--hover { |
|---|
| | | background-color: #E6E6E6 !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="tn-cascade-selection tn-cascade-selection-class"> |
|---|
| | | <scroll-view |
|---|
| | | class="selection__scroll-view" |
|---|
| | | :class="[{'tn-border-solid-bottom': headerLine}]" |
|---|
| | | :style="[scrollViewStyle]" |
|---|
| | | scroll-x |
|---|
| | | scroll-with-animation |
|---|
| | | :scroll-into-view="scrollViewId" |
|---|
| | | > |
|---|
| | | <view class="selection__header" :class="[backgroundColorClass]" :style="[headerStyle]"> |
|---|
| | | <view |
|---|
| | | v-for="(item, index) in selectedArr" |
|---|
| | | :key="index" |
|---|
| | | :id="`select__${index}`" |
|---|
| | | class="selection__header__item" |
|---|
| | | :class="[headerItemClass(index)]" |
|---|
| | | :style="[headerItemStyle(index)]" |
|---|
| | | @tap.stop="clickNav(index)" |
|---|
| | | > |
|---|
| | | {{ item.text }} |
|---|
| | | <view |
|---|
| | | v-if="index===currentTab && showActiveLine" |
|---|
| | | class="selection__header__line" |
|---|
| | | :style="{backgroundColor: activeLineColor}" |
|---|
| | | ></view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </scroll-view> |
|---|
| | | |
|---|
| | | <swiper |
|---|
| | | class="selection__list" |
|---|
| | | :class="[backgroundColorClass]" |
|---|
| | | :style="[listStyle]" |
|---|
| | | :current="currentTab" |
|---|
| | | :duration="300" |
|---|
| | | @change="switchTab" |
|---|
| | | > |
|---|
| | | <swiper-item |
|---|
| | | v-for="(item, index) in selectedArr" |
|---|
| | | :key="index" |
|---|
| | | > |
|---|
| | | <scroll-view |
|---|
| | | class="selection__list__item" |
|---|
| | | :style="{height: selectionContainerHeight + 'rpx'}" |
|---|
| | | scroll-y |
|---|
| | | :scroll-into-view="item.scrollViewId" |
|---|
| | | > |
|---|
| | | <view class="selection__list__item--first"></view> |
|---|
| | | <view |
|---|
| | | v-for="(subItem, subIndex) in item.list" |
|---|
| | | :key="subIndex" |
|---|
| | | :id="`select__${subIndex}`" |
|---|
| | | class="selection__list__item__cell" |
|---|
| | | :style="[itemStyle]" |
|---|
| | | @tap="change(index, subIndex, subItem)" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | v-if="item.index === subIndex" |
|---|
| | | class="selection__list__item__icon tn-icon-success" |
|---|
| | | :style="[itemIconStyle]" |
|---|
| | | ></view> |
|---|
| | | <image |
|---|
| | | v-if="subItem.src" |
|---|
| | | class="selection__list__item__image" |
|---|
| | | :style="[itemImageStyle]" |
|---|
| | | :src="subItem.src" |
|---|
| | | ></image> |
|---|
| | | <view |
|---|
| | | class="selection__list__item__title" |
|---|
| | | :class="[{'tn-text-bold': item.index === subIndex && itemActiveBold}]" |
|---|
| | | :style="[itemTitleStyle(index, subIndex)]" |
|---|
| | | > |
|---|
| | | {{ subItem.text }} |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | v-if="subItem.subText" |
|---|
| | | class="selection__list__item__title--sub" |
|---|
| | | :style="[itemSubTitleStyle]" |
|---|
| | | > |
|---|
| | | {{ subItem.subText }} |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </scroll-view> |
|---|
| | | </swiper-item> |
|---|
| | | </swiper> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import componentsColorMixin from '../../libs/mixin/components_color.js' |
|---|
| | | export default { |
|---|
| | | name: 'tn-cascade-selection', |
|---|
| | | mixins: [ componentsColorMixin ], |
|---|
| | | props: { |
|---|
| | | // å¦æä¸ä¸çº§æ¯è¯·æ±è¿åï¼å为第ä¸çº§æ°æ®ï¼å¦å为æææ°æ® |
|---|
| | | /* { |
|---|
| | | text: '', // æ é¢ |
|---|
| | | subText: '', // åæ é¢ |
|---|
| | | src: '', // å¾çå°å |
|---|
| | | value: 0, // éä¸çå¼ |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | text: '', |
|---|
| | | subText: '', |
|---|
| | | value: 0, |
|---|
| | | children: [] |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } */ |
|---|
| | | list: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // é»è®¤éä¸å¼ |
|---|
| | | // ['value1','value2','value3'] |
|---|
| | | defaultValue: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // åéæ°æ®éè¿è¯·æ±æ¥è·å |
|---|
| | | request: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // request为trueæ¶çæ, è·åå°çåéæ°æ® |
|---|
| | | receiveData: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ¾ç¤ºheaderåºé¨ç»çº¿ |
|---|
| | | headerLine: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // headerèæ¯é¢è² |
|---|
| | | headerBgColor: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // 顶é¨æ ç¾æ é«åº¦,åä½rpx |
|---|
| | | tabsHeight: { |
|---|
| | | type: Number, |
|---|
| | | default: 88 |
|---|
| | | }, |
|---|
| | | // é»è®¤æ¾ç¤ºæå |
|---|
| | | text: { |
|---|
| | | type: String, |
|---|
| | | default: '请éæ©' |
|---|
| | | }, |
|---|
| | | // éä¸çé¢è² |
|---|
| | | activeColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#01BEFF' |
|---|
| | | }, |
|---|
| | | // éä¸åå ç² |
|---|
| | | activeBold: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // éä¸æ¾ç¤ºåºé¨çº¿æ¡ |
|---|
| | | showActiveLine: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // 线æ¡é¢è² |
|---|
| | | activeLineColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#01BEFF' |
|---|
| | | }, |
|---|
| | | // icon大å°,åä½rpx |
|---|
| | | activeIconSize: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // iconé¢è² |
|---|
| | | activeIconColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#01BEFF' |
|---|
| | | }, |
|---|
| | | // itemå¾ç宽度, åä½rpx |
|---|
| | | itemImgWidth: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // itemå¾çé«åº¦, åä½rpx |
|---|
| | | itemImgHeight: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // itemå¾çåè§ |
|---|
| | | itemImgRadius: { |
|---|
| | | type: String, |
|---|
| | | default: '50%' |
|---|
| | | }, |
|---|
| | | // item texté¢è² |
|---|
| | | itemTextColor: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // item textéä¸é¢è² |
|---|
| | | itemActiveTextColor: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // item textéä¸å ç² |
|---|
| | | itemActiveBold: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // item textæå大å°, åä½rpx |
|---|
| | | itemTextSize: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // item subTexté¢è² |
|---|
| | | itemSubTextColor: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // item subTextåä½å¤§å°, åä½rpx |
|---|
| | | itemSubTextSize: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // itemæ ·å¼ |
|---|
| | | itemStyle: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // selectioné项容å¨é«åº¦, åä½rpx |
|---|
| | | selectionContainerHeight: { |
|---|
| | | type: Number, |
|---|
| | | default: 300 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | scrollViewStyle() { |
|---|
| | | let style = {} |
|---|
| | | if (this.headerBgColor) { |
|---|
| | | style.backgroundColor = this.headerBgColor |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | headerStyle() { |
|---|
| | | let style = {} |
|---|
| | | style.height = `${this.tabsHeight}rpx` |
|---|
| | | if (this.backgroundColorStyle) { |
|---|
| | | style.backgroundColor = this.backgroundColorStyle |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | headerItemClass() { |
|---|
| | | return (index) => { |
|---|
| | | let clazz = '' |
|---|
| | | if (index !== this.currentTab) { |
|---|
| | | clazz += ` ${this.fontColorClass}` |
|---|
| | | } else { |
|---|
| | | if (this.activeBold) { |
|---|
| | | clazz += ' tn-text-bold' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return clazz |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | headerItemStyle() { |
|---|
| | | return (index) => { |
|---|
| | | let style = {} |
|---|
| | | style.color = index === this.currentTab ? this.activeColor : (this.fontColorStyle ? this.fontColorStyle : '') |
|---|
| | | if (this.fontSizeStyle) { |
|---|
| | | style.fontSize = this.fontSizeStyle |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | listStyle() { |
|---|
| | | let style = {} |
|---|
| | | style.height = `${this.selectionContainerHeight}rpx` |
|---|
| | | if (this.backgroundColorStyle) { |
|---|
| | | style.color = this.backgroundColorStyle |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | itemIconStyle() { |
|---|
| | | let style = {} |
|---|
| | | if (this.activeIconColor) { |
|---|
| | | style.color = this.activeIconColor |
|---|
| | | } |
|---|
| | | if (this.activeIconSize) { |
|---|
| | | style.fontSize = this.activeIconSize + 'rpx' |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | itemImageStyle() { |
|---|
| | | let style = {} |
|---|
| | | if (this.itemImgWidth) { |
|---|
| | | style.width = this.itemImgWidth + 'rpx' |
|---|
| | | } |
|---|
| | | if (this.itemImgHeight) { |
|---|
| | | style.height = this.itemImgHeight + 'rpx' |
|---|
| | | } |
|---|
| | | if (this.itemImgRadius) { |
|---|
| | | style.borderRadius = this.itemImgRadius |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | itemTitleStyle() { |
|---|
| | | return (index, subIndex) => { |
|---|
| | | let style = {} |
|---|
| | | if (index === subIndex) { |
|---|
| | | if (this.itemActiveTextColor) { |
|---|
| | | style.color = this.itemActiveTextColor |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | if (this.itemTextColor) { |
|---|
| | | style.color = this.itemTextColor |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (this.itemTextSize) { |
|---|
| | | style.fontSize = this.itemTextSize + 'rpx' |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | itemSubTitleStyle() { |
|---|
| | | let style = {} |
|---|
| | | if (this.itemSubTextColor) { |
|---|
| | | style.color = this.itemSubTextColor |
|---|
| | | } |
|---|
| | | if (this.itemSubTextSize) { |
|---|
| | | style.fontSize = this.itemSubTextSize + 'rpx' |
|---|
| | | } |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | list(val) { |
|---|
| | | this.initData(val, -1) |
|---|
| | | }, |
|---|
| | | defaultValue(val) { |
|---|
| | | this.setDefaultValue(val) |
|---|
| | | }, |
|---|
| | | receiveData(val) { |
|---|
| | | this.addSubData(val, this.currentTab) |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // å½åéä¸çåé |
|---|
| | | currentTab: 0, |
|---|
| | | // tabsæ scrollViewæ»å¨çä½ç½® |
|---|
| | | scrollViewId: 'select__0', |
|---|
| | | // é项æ°ç» |
|---|
| | | selectedArr: [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.setDefaultValue(this.defaultValue) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // åå§åæ°æ® |
|---|
| | | initData(data, index) { |
|---|
| | | if (!data || data.length === 0) return |
|---|
| | | if (this.request) { |
|---|
| | | // 第ä¸çº§æ°æ® |
|---|
| | | this.addSubData(data, index) |
|---|
| | | } else { |
|---|
| | | this.addSubData(this.getItemList(index, -1), index) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // éç½®æ°æ® |
|---|
| | | reset() { |
|---|
| | | this.initData(this.list, -1) |
|---|
| | | }, |
|---|
| | | // æ»å¨åæ¢ |
|---|
| | | switchTab(e) { |
|---|
| | | this.currentTab = e.detail.current |
|---|
| | | this.checkSelectPosition() |
|---|
| | | }, |
|---|
| | | // ç¹å»æ é¢åæ¢ |
|---|
| | | clickNav(index) { |
|---|
| | | if (this.currentTab !== index) { |
|---|
| | | this.currentTab = index |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // å表æ°æ®åçæ¹å |
|---|
| | | change(index, subIndex, subItem) { |
|---|
| | | let item = this.selectedArr[index] |
|---|
| | | if (item.index === subIndex) return |
|---|
| | | item.index = subIndex |
|---|
| | | item.text = subItem.text |
|---|
| | | item.subText = subItem.subText || '' |
|---|
| | | item.value = subItem.value |
|---|
| | | item.src = subItem.src || '' |
|---|
| | | this.$emit('change', { |
|---|
| | | index: index, |
|---|
| | | subIndex: subIndex, |
|---|
| | | ...subItem |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // å¦æä¸æ¯å¼æ¥å è½½ï¼åååºå¯¹åºçæ°æ® |
|---|
| | | if (!this.request) { |
|---|
| | | let data = this.getItemList(index, subIndex) |
|---|
| | | this.addSubData(data, index) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 设置é»è®¤çæ°æ® |
|---|
| | | setDefaultValue(val) { |
|---|
| | | let defaultValues = val || [] |
|---|
| | | if (defaultValues.length > 0) { |
|---|
| | | this.selectedArr = this.getItemListWithValues(JSON.parse(JSON.stringify(this.list)), defaultValues) |
|---|
| | | if (!this.selectedArr) return |
|---|
| | | this.currentTab = this.selectedArr.length - 1 |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.checkSelectPosition() |
|---|
| | | }) |
|---|
| | | // defaultItemList.map((item) => { |
|---|
| | | // item.scrollViewId = `select__${item.index}` |
|---|
| | | // }) |
|---|
| | | // this.selectedArr = defaultItemList |
|---|
| | | // this.currentTab = defaultItemList.length - 1 |
|---|
| | | // this.$nextTick(() => { |
|---|
| | | // this.checkSelectPosition() |
|---|
| | | // }) |
|---|
| | | } else { |
|---|
| | | this.initData(this.list, -1) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // è·å对åºé项çitemæ°æ® |
|---|
| | | getItemList(index, subIndex) { |
|---|
| | | let list = [] |
|---|
| | | let arr = JSON.parse(JSON.stringify(this.list)) |
|---|
| | | // åå§åæ°æ® |
|---|
| | | if (index === -1) { |
|---|
| | | list = this.removeChildren(arr) |
|---|
| | | } else { |
|---|
| | | // å¤æ第ä¸é¡¹æ¯å¦å·²ç»éæ© |
|---|
| | | let value = this.selectedArr[0].index |
|---|
| | | value = value === -1 ? subIndex : value |
|---|
| | | list = arr[value].children || [] |
|---|
| | | if (index > 0) { |
|---|
| | | for (let i = 1; i < index + 1; i++) { |
|---|
| | | // è·åå½åæ°æ®éä¸çåºå· |
|---|
| | | let val = index === i ? subIndex : this.selectedArr[i].index |
|---|
| | | list = list[val].children || [] |
|---|
| | | if (list.length === 0) break |
|---|
| | | } |
|---|
| | | } |
|---|
| | | list = this.removeChildren(list) |
|---|
| | | } |
|---|
| | | return list |
|---|
| | | }, |
|---|
| | | // æ ¹æ®æ°ç»ä¸çå¼è·å对åºçitemæ°æ® |
|---|
| | | getItemListWithValues(data, values) { |
|---|
| | | const defaultValues = JSON.parse(JSON.stringify(values)) |
|---|
| | | if (!defaultValues || defaultValues.length === 0) return |
|---|
| | | // ååºç¬¬ä¸ä¸ªå¼æ对åºçitem |
|---|
| | | const itemIndex = data.findIndex((item) => { |
|---|
| | | return item.value === defaultValues[0] |
|---|
| | | }) |
|---|
| | | if (itemIndex === -1) return |
|---|
| | | const item = data[itemIndex] |
|---|
| | | item.index = itemIndex |
|---|
| | | item.scrollViewId = `select__${itemIndex}` |
|---|
| | | item.list = this.removeChildren(JSON.parse(JSON.stringify(data))) |
|---|
| | | // å¤ææ¯å¦åªæ1ä¸ªå¼ |
|---|
| | | if (defaultValues.length === 1 || (!item.hasOwnProperty('children') || item.children.length === 0)) { |
|---|
| | | return this.removeChildren([item]) |
|---|
| | | } else { |
|---|
| | | let selectItemList = [] |
|---|
| | | const children = item.children |
|---|
| | | selectItemList.push(item) |
|---|
| | | // 移é¤å·²ç»è·åçå¼ |
|---|
| | | defaultValues.splice(0, 1) |
|---|
| | | const childrenValue = this.getItemListWithValues(children, defaultValues) |
|---|
| | | selectItemList = selectItemList.concat(childrenValue) |
|---|
| | | |
|---|
| | | return this.removeChildren(selectItemList) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // å é¤åå
ç´ |
|---|
| | | removeChildren(data) { |
|---|
| | | let list = data.map((item) => { |
|---|
| | | if (item.hasOwnProperty('children')) { |
|---|
| | | delete item['children'] |
|---|
| | | } |
|---|
| | | return item |
|---|
| | | }) |
|---|
| | | return list |
|---|
| | | }, |
|---|
| | | // æ°å¢åéæ°æ®æ¶å¤ç |
|---|
| | | addSubData(data, index) { |
|---|
| | | // å¤ææ¯å¦å·²ç»å®æéæ©æ°æ®æè
为åå§åæ°æ® |
|---|
| | | if (!data || data.length === 0) { |
|---|
| | | if (index == -1) return |
|---|
| | | // å®æéæ© |
|---|
| | | let arr = this.selectedArr |
|---|
| | | // å¦æå½åéä¸é¡¹çåºå·æ¯å·²éæ°æ®çé¿åº¦å°ï¼å表示å½åéæ°éæ©äºæ°æ® |
|---|
| | | if (index < arr.length - 1) { |
|---|
| | | let newArr = arr.slice(0, index + 1) |
|---|
| | | this.selectedArr = newArr |
|---|
| | | } |
|---|
| | | let result = JSON.parse(JSON.stringify(this.selectedArr)) |
|---|
| | | let lastItem = result[result.length - 1] || {} |
|---|
| | | let text = '' |
|---|
| | | result.map(item => { |
|---|
| | | text += item.text |
|---|
| | | delete item['list'] |
|---|
| | | delete item['scrollViewId'] |
|---|
| | | return item |
|---|
| | | }) |
|---|
| | | this.$emit('complete', { |
|---|
| | | result: result, |
|---|
| | | value: lastItem.value, |
|---|
| | | text: text, |
|---|
| | | subText: lastItem.subText, |
|---|
| | | src: lastItem.src |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | // éç½®æ°æ® |
|---|
| | | let item = [{ |
|---|
| | | text: this.text, |
|---|
| | | subText: '', |
|---|
| | | value: '', |
|---|
| | | src: '', |
|---|
| | | index: -1, |
|---|
| | | scrollViewId: 'select__0', |
|---|
| | | list: data |
|---|
| | | }] |
|---|
| | | // åå§åæ°æ® |
|---|
| | | if (index === -1) { |
|---|
| | | this.selectedArr = item |
|---|
| | | } else { |
|---|
| | | // æ¼æ¥æ°æ§æ°æ®å¹¶ä¸å¤ææ¯å¦ä¸ºéæ°éæ©äºæ°æ®ï¼å¦æ为éæ°éæ©äºæ°æ®åéç½®ä¹åçé项æ°æ®ï¼ |
|---|
| | | let retainArr = this.selectedArr.slice(0, index + 1) |
|---|
| | | this.selectedArr = retainArr.concat(item) |
|---|
| | | } |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.currentTab = this.selectedArr.length - 1 |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ£æ¥å½åéä¸é¡¹ï¼å¹¶å°é项设置ä½ç½®ä¿¡æ¯ |
|---|
| | | checkSelectPosition() { |
|---|
| | | let item = this.selectedArr[this.currentTab] |
|---|
| | | item.scrollViewId = 'select__0' |
|---|
| | | this.$nextTick(() => { |
|---|
| | | setTimeout(() => { |
|---|
| | | // 设置å½åæ°æ®æ»å¨å°çä½ç½® |
|---|
| | | let val = item.index < 2 ? 0 : Number(item.index - 2) |
|---|
| | | item.scrollViewId = `select__${val}` |
|---|
| | | }, 10) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 设置é项æ»å¨å°æå¨çä½ç½® |
|---|
| | | if (this.currentTab > 1) { |
|---|
| | | this.scrollViewId = `select__${this.currentTab - 1}` |
|---|
| | | } else { |
|---|
| | | this.scrollViewId = `select__0` |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .tn-cascade-selection { |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .selection { |
|---|
| | | &__scroll-view { |
|---|
| | | background-color: #FFFFFF; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__header { |
|---|
| | | width: 100%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | max-width: 240rpx; |
|---|
| | | padding: 15rpx 30rpx; |
|---|
| | | flex-shrink: 0; |
|---|
| | | overflow: hidden; |
|---|
| | | white-space: nowrap; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__line { |
|---|
| | | width: 60rpx; |
|---|
| | | height: 6rpx; |
|---|
| | | border-radius: 4rpx; |
|---|
| | | position: absolute; |
|---|
| | | bottom: 0; |
|---|
| | | right: 0; |
|---|
| | | left: 50%; |
|---|
| | | transform: translateX(-50%); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__list { |
|---|
| | | background-color: #FFFFFF; |
|---|
| | | &__item { |
|---|
| | | &--first { |
|---|
| | | width: 100%; |
|---|
| | | height: 20rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__cell { |
|---|
| | | width: 100%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | padding: 20rpx 30rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__icon { |
|---|
| | | margin-right: 12rpx; |
|---|
| | | font-size: 24rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__image { |
|---|
| | | width: 40rpx; |
|---|
| | | height: 40rpx; |
|---|
| | | margin-right: 12rpx; |
|---|
| | | flex-shrink: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__title { |
|---|
| | | word-break: break-all; |
|---|
| | | color: #333333; |
|---|
| | | font-size: 28rpx; |
|---|
| | | |
|---|
| | | &--sub { |
|---|
| | | margin-left: 20rpx; |
|---|
| | | word-break: break-all; |
|---|
| | | color: $tn-font-sub-color; |
|---|
| | | font-size: 24rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="tn-checkbox-group-class tn-checkbox-group"> |
|---|
| | | <slot></slot> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import Emitter from '../../libs/utils/emitter.js' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | mixins: [ Emitter ], |
|---|
| | | name: 'tn-checkbox-group', |
|---|
| | | props: { |
|---|
| | | value: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // å¯ä»¥éä¸å¤å°ä¸ªcheckbox |
|---|
| | | max: { |
|---|
| | | type: Number, |
|---|
| | | default: 999 |
|---|
| | | }, |
|---|
| | | // 表åæ交æ¶çæ è¯ç¬¦ |
|---|
| | | name: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // ç¦ç¨éæ© |
|---|
| | | disabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // ç¦ç¨ç¹å»æ ç¾è¿è¡éæ© |
|---|
| | | disabledLabel: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // éæ©æ¡çå½¢ç¶ square æ¹å½¢ circle åå½¢ |
|---|
| | | shape: { |
|---|
| | | type: String, |
|---|
| | | default: 'square' |
|---|
| | | }, |
|---|
| | | // éä¸æ¶çé¢è² |
|---|
| | | activeColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#01BEFF' |
|---|
| | | }, |
|---|
| | | // ç»ä»¶å¤§å° |
|---|
| | | size: { |
|---|
| | | type: Number, |
|---|
| | | default: 34 |
|---|
| | | }, |
|---|
| | | // æ¯ä¸ªcheckboxå ç宽度 |
|---|
| | | width: { |
|---|
| | | type: String, |
|---|
| | | default: 'auto' |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¢è¡ |
|---|
| | | wrap: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // å¾æ å¤§å° |
|---|
| | | iconSize: { |
|---|
| | | type: Number, |
|---|
| | | default: 20 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // è¿écomputedçåéï¼é½æ¯åç»ä»¶tn-checkboxéè¦ç¨å°çï¼ç±äºå¤´æ¡å°ç¨åºçå
¼å®¹æ§å·®å¼ï¼åç»ä»¶æ æ³å®æ¶çå¬ç¶ç»ä»¶åæ°çåå |
|---|
| | | // æ以éè¦æå¨éç¥åç»ä»¶ï¼è¿éè¿åä¸ä¸ªparentDataåéï¼ä¾watchçå¬ï¼å¨å
¶ä¸å»éç¥æ¯ä¸ä¸ªåç»ä»¶éæ°ä»ç¶ç»ä»¶(tn-checkbox-group) |
|---|
| | | // æåç¶ç»ä»¶æ°çåååçåæ° |
|---|
| | | parentData() { |
|---|
| | | return [this.value, this.disabled, this.disabledLabel, this.shape, this.activeColor, this.size, this.width, this.wrap, this.iconSize] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | // å½ç¶ç»ä»¶ä¸çåç»ä»¶éè¦å
±äº«çåæ°åçäºååï¼æå¨éç¥åç»ä»¶ |
|---|
| | | parentData() { |
|---|
| | | if (this.children.length) { |
|---|
| | | this.children.map(child => { |
|---|
| | | // å¤æåç»ä»¶(tn-checkbox)å¦ææupdateParentDataæ¹æ³çè¯ï¼åç»ä»¶éæ°ä»ç¶ç»ä»¶æåäºææ°çå¼ |
|---|
| | | typeof(child.updateParentData) === 'function' && child.updateParentData() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.children = [] |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | initValue(values) { |
|---|
| | | this.$emit('input', values) |
|---|
| | | }, |
|---|
| | | // 触åäºä»¶ |
|---|
| | | emitEvent() { |
|---|
| | | let values = [] |
|---|
| | | this.children.map(child => { |
|---|
| | | if (child.checkValue) values.push(child.name) |
|---|
| | | }) |
|---|
| | | this.$emit('change', values) |
|---|
| | | this.$emit('input', values) |
|---|
| | | // ååºäºä»¶ï¼ç¨äºå¨è¡¨åç»ä»¶ä¸åµå
¥checkboxçæ
åµï¼è¿è¡éªè¯ |
|---|
| | | // ç±äºå¤´æ¡å°ç¨åºæ§è¡è¿éï¼æ
éè¦ç¨å å毫ç§çå»¶æ¶ |
|---|
| | | setTimeout(() => { |
|---|
| | | // å°å½åçå¼åéå° tn-form-item è¿è¡æ ¡éª |
|---|
| | | this.dispatch('tn-form-item', 'on-form-change', values) |
|---|
| | | }, 60) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | |
|---|
| | | .tn-checkbox-group { |
|---|
| | | /* #ifndef MP || APP-NVUE */ |
|---|
| | | display: inline-flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | /* #endif */ |
|---|
| | | &::after { |
|---|
| | | content: " "; |
|---|
| | | display: table; |
|---|
| | | clear: both; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="tn-checkbox-class tn-checkbox" :style="[checkboxStyle]"> |
|---|
| | | <view |
|---|
| | | class="tn-checkbox__icon-wrap" |
|---|
| | | :class="[iconClass]" |
|---|
| | | :style="[iconStyle]" |
|---|
| | | @tap="toggle" |
|---|
| | | > |
|---|
| | | <view class="tn-checkbox__icon-wrap__icon" :class="[`tn-icon-${iconName}`]"></view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <view |
|---|
| | | class="tn-checkbox__label" |
|---|
| | | :class="[labelClass]" |
|---|
| | | :style="{ |
|---|
| | | fontSize: labelSize ? labelSize + 'rpx' : '' |
|---|
| | | }" |
|---|
| | | @tap="onClickLabel" |
|---|
| | | > |
|---|
| | | <slot></slot> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'tn-checkbox', |
|---|
| | | props: { |
|---|
| | | // checkboxå称 |
|---|
| | | name: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // æ¯å¦ä¸ºéä¸ç¶æ |
|---|
| | | value: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // ç¦ç¨éæ© |
|---|
| | | disabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // ç¦ç¨ç¹å»æ ç¾è¿è¡éæ© |
|---|
| | | disabledLabel: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // éæ©æ¡çå½¢ç¶ square æ¹å½¢ circle åå½¢ |
|---|
| | | shape: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // éä¸æ¶çé¢è² |
|---|
| | | activeColor: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // ç»ä»¶å¤§å° |
|---|
| | | size: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // å¾æ å称 |
|---|
| | | iconName: { |
|---|
| | | type: String, |
|---|
| | | default: 'success' |
|---|
| | | }, |
|---|
| | | // å¾æ å¤§å° |
|---|
| | | iconSize: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // labelçåä½å¤§å° |
|---|
| | | labelSize: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // æ¯å¦ç¦ç¨éä¸ï¼ç¶ç»ä»¶çç¦ç¨ä¼è¦çå½åçç¦ç¨ç¶æ |
|---|
| | | isDisabled() { |
|---|
| | | return this.disabled ? this.disabled : (this.parent ? this.parentData.disabled : false) |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç¦ç¨ç¹å»labeléä¸ï¼ç¶ç»ä»¶çç¦ç¨ä¼è¦çå½åçç¦ç¨ç¶æ |
|---|
| | | isDisabledLabel() { |
|---|
| | | return this.disabledLabel ? this.disabledLabel : (this.parent ? this.parentData.disabledLabel : false) |
|---|
| | | }, |
|---|
| | | // 尺寸 |
|---|
| | | checkboxSize() { |
|---|
| | | return this.size ? this.size : (this.parent ? this.parentData.size : 34) |
|---|
| | | }, |
|---|
| | | // æ¿æ´»æ¶çé¢è² |
|---|
| | | elAvtiveColor() { |
|---|
| | | return this.activeColor ? this.activeColor : (this.parent ? this.parentData.activeColor : '#01BEFF') |
|---|
| | | }, |
|---|
| | | // å½¢ç¶ |
|---|
| | | elShape() { |
|---|
| | | return this.shape ? this.shape : (this.parent ? this.parentData.shape : 'square') |
|---|
| | | }, |
|---|
| | | iconClass() { |
|---|
| | | let clazz = '' |
|---|
| | | clazz += (' tn-checkbox__icon-wrap--' + this.elShape) |
|---|
| | | |
|---|
| | | if (this.checkValue) clazz += ' tn-checkbox__icon-wrap--checked' |
|---|
| | | if (this.isDisabled) clazz += ' tn-checkbox__icon-wrap--disabled' |
|---|
| | | if (this.value && this.isDisabled) clazz += ' tn-checkbox__icon-wrap--disabled--checked' |
|---|
| | | |
|---|
| | | return clazz |
|---|
| | | }, |
|---|
| | | iconStyle() { |
|---|
| | | let style = {} |
|---|
| | | // å¤ææ¯å¦ç¨æ·æå¨ç¦ç¨åä¼ éçå¼ |
|---|
| | | if (this.elAvtiveColor && this.checkValue && !this.isDisabled) { |
|---|
| | | style.borderColor = this.elAvtiveColor |
|---|
| | | style.backgroundColor = this.elAvtiveColor |
|---|
| | | } |
|---|
| | | |
|---|
| | | // checkboxå
é¨çå¾éå¾æ ï¼å¦æéä¸ç¶æï¼ä¸ºç½è²ï¼å¦å为éæè²å³å¯ |
|---|
| | | style.color = this.checkValue ? '#FFFFFF' : 'transparent' |
|---|
| | | |
|---|
| | | style.width = this.checkboxSize + 'rpx' |
|---|
| | | style.height = style.width |
|---|
| | | |
|---|
| | | style.fontSize = (this.iconSize ? this.iconSize : (this.parent ? this.parentData.iconSize : 20)) + 'rpx' |
|---|
| | | |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | checkboxStyle() { |
|---|
| | | let style = {} |
|---|
| | | if (this.parent && this.parentData.width) { |
|---|
| | | // #ifdef MP |
|---|
| | | // å家å°ç¨åºå 为å®ä»¬ç¹æ®çç¼è¯ç»æï¼ä½¿ç¨floatå¸å± |
|---|
| | | style.float = 'left'; |
|---|
| | | // #endif |
|---|
| | | // #ifndef MP |
|---|
| | | // H5åAPP使ç¨flexå¸å± |
|---|
| | | style.flex = `0 0 ${this.parentData.width}`; |
|---|
| | | // #endif |
|---|
| | | } |
|---|
| | | if(this.parent && this.parentData.wrap) { |
|---|
| | | style.width = '100%'; |
|---|
| | | // #ifndef MP |
|---|
| | | // H5åAPP使ç¨flexå¸å±ï¼å°å®½åº¦è®¾ç½®100%ï¼å³å¯èªå¨æ¢è¡ |
|---|
| | | style.flex = '0 0 100%'; |
|---|
| | | // #endif |
|---|
| | | } |
|---|
| | | |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | labelClass() { |
|---|
| | | let clazz = '' |
|---|
| | | if (this.isDisabled) { |
|---|
| | | clazz += ' tn-checkbox__label--disabled' |
|---|
| | | } |
|---|
| | | return clazz |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // å½åcheckboxçvalueå¼ |
|---|
| | | checkValue: false, |
|---|
| | | parentData: { |
|---|
| | | value: null, |
|---|
| | | max: null, |
|---|
| | | disabled: null, |
|---|
| | | disabledLabel: null, |
|---|
| | | shape: null, |
|---|
| | | activeColor: null, |
|---|
| | | size: null, |
|---|
| | | width: null, |
|---|
| | | wrap: null, |
|---|
| | | iconSize: null |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | value(val) { |
|---|
| | | this.checkValue = val |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | // æ¯ä»å®å°ç¨åºä¸æ¯æprovide/injectï¼æ以使ç¨è¿ä¸ªæ¹æ³è·åæ´ä¸ªç¶ç»ä»¶ï¼å¨createdå®ä¹ï¼é¿å
循ç¯åºç¨ |
|---|
| | | // this.parent = this.$t.$parent.call(this, 'tn-checkbox-group') |
|---|
| | | // // å¦æåå¨u-checkbox-groupï¼å°æ¬ç»ä»¶çthiså¡è¿ç¶ç»ä»¶çchildrenä¸ |
|---|
| | | // this.parent && this.parent.children.push(this) |
|---|
| | | // // åå§åç¶ç»ä»¶çvalueå¼ |
|---|
| | | // this.parent && this.parent.emitEvent() |
|---|
| | | this.updateParentData() |
|---|
| | | this.parent && this.parent.children.push(this) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | updateCheckValue() { |
|---|
| | | // æ´æ°å½åcheckboxçéä¸ç¶æ |
|---|
| | | this.checkValue = (this.parent && this.parentData.value.includes(this.name)) || this.value === true |
|---|
| | | if (this.parent) { |
|---|
| | | if (this.value && !this.parentData.value.includes(this.name)) { |
|---|
| | | this.parentData.value.push(this.name) |
|---|
| | | this.parent.initValue(this.parentData.value) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | updateParentData() { |
|---|
| | | this.getParentData('tn-checkbox-group') |
|---|
| | | this.updateCheckValue() |
|---|
| | | }, |
|---|
| | | onClickLabel() { |
|---|
| | | if (!this.isDisabled && !this.isDisabledLabel) { |
|---|
| | | this.setValue() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | toggle() { |
|---|
| | | if (!this.isDisabled) { |
|---|
| | | this.setValue() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | emitEvent() { |
|---|
| | | this.$emit('change', { |
|---|
| | | name: this.name, |
|---|
| | | value: !this.checkValue |
|---|
| | | }) |
|---|
| | | if (this.parent) { |
|---|
| | | this.checkValue = !this.checkValue |
|---|
| | | // æ§è¡ç¶ç»ä»¶tn-checkbox-groupçäºä»¶æ¹æ³ |
|---|
| | | // çå¾
ä¸ä¸ä¸ªå¨æåæ§è¡ï¼å 为this.$emit('input')ä½ç¨äºç¶ç»ä»¶ï¼ååé¦å°åç»ä»¶å
é¨ï¼éè¦æ¶é´ |
|---|
| | | setTimeout(() => { |
|---|
| | | if(this.parent.emitEvent) this.parent.emitEvent(); |
|---|
| | | }, 80) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 设置inputçå¼ï¼éè¿v-modalç»å®ç»ä»¶çå¼ |
|---|
| | | setValue() { |
|---|
| | | // å¤ææ¯å¦ä¸ºå¯éé¡¹ç» |
|---|
| | | if (this.parent) { |
|---|
| | | // å转ç¶æ |
|---|
| | | if (this.checkValue === true) { |
|---|
| | | this.emitEvent() |
|---|
| | | // this.$emit('input', !this.checkValue) |
|---|
| | | } else { |
|---|
| | | // è¶
åºæ大å¯é项ï¼å¼¹åºæ示 |
|---|
| | | if (this.parentData.value.length >= this.parentData.max) { |
|---|
| | | return this.$t.message.toast(`æå¤å¯é${this.parent.max}项`) |
|---|
| | | } |
|---|
| | | // å¦æåæ¥ä¸ºæªéä¸ç¶æï¼éè¦éä¸çæ°éå°äºç¶ç»ä»¶ä¸è®¾ç½®çmaxå¼ï¼æå¯ä»¥éä¸ |
|---|
| | | this.emitEvent(); |
|---|
| | | // this.$emit('input', !this.checkValue); |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | // åªæä¸ä¸ªå¯é项 |
|---|
| | | this.emitEvent() |
|---|
| | | this.$emit('input', !this.checkValue) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | |
|---|
| | | .tn-checkbox { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: inline-flex; |
|---|
| | | /* #endif */ |
|---|
| | | align-items: center; |
|---|
| | | overflow: hidden; |
|---|
| | | user-select: none; |
|---|
| | | line-height: 1.8; |
|---|
| | | |
|---|
| | | &__icon-wrap { |
|---|
| | | color: $tn-font-color; |
|---|
| | | flex: none; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | box-sizing: border-box; |
|---|
| | | width: 42rpx; |
|---|
| | | height: 42rpx; |
|---|
| | | color: transparent; |
|---|
| | | text-align: center; |
|---|
| | | transition-property: color, border-color, background-color; |
|---|
| | | border: 1px solid $tn-font-sub-color; |
|---|
| | | transition-duration: 0.2s; |
|---|
| | | |
|---|
| | | /* #ifdef MP-TOUTIAO */ |
|---|
| | | // 头æ¡å°ç¨åºå
¼å®¹æ§é®é¢ï¼éè¦è®¾ç½®è¡é«ä¸º0ï¼å¦åå¾æ åä¸ |
|---|
| | | &__icon { |
|---|
| | | line-height: 0; |
|---|
| | | } |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | &--circle { |
|---|
| | | border-radius: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--square { |
|---|
| | | border-radius: 6rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--checked { |
|---|
| | | color: #FFFFFF; |
|---|
| | | background-color: $tn-main-color; |
|---|
| | | border-color: $tn-main-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--disabled { |
|---|
| | | background-color: $tn-font-holder-color; |
|---|
| | | border-color: $tn-font-sub-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--disabled--checked { |
|---|
| | | color: $tn-font-sub-color !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__label { |
|---|
| | | word-wrap: break-word; |
|---|
| | | margin-left: 10rpx; |
|---|
| | | margin-right: 24rpx; |
|---|
| | | color: $tn-font-color; |
|---|
| | | font-size: 30rpx; |
|---|
| | | |
|---|
| | | &--disabled { |
|---|
| | | color: $tn-font-sub-color; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="tn-circle-progress-class tn-circle-progress" |
|---|
| | | :style="{ |
|---|
| | | width: widthPx + 'px', |
|---|
| | | height: widthPx + 'px' |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <!-- æ¯ä»å®å°ç¨åºä¸æ¯æcanvas-idå±æ§ï¼å¿
é¡»ç¨idå±æ§ --> |
|---|
| | | <!-- é»è®¤åç¯ --> |
|---|
| | | <canvas |
|---|
| | | class="tn-circle-progress__canvas-bg" |
|---|
| | | :canvas-id="elBgId" |
|---|
| | | :id="elBgId" |
|---|
| | | :style="{ |
|---|
| | | width: widthPx + 'px', |
|---|
| | | height: widthPx + 'px' |
|---|
| | | }" |
|---|
| | | ></canvas> |
|---|
| | | <!-- è¿åº¦åç¯ --> |
|---|
| | | <canvas |
|---|
| | | class="tn-circle-progress__canvas" |
|---|
| | | :canvas-id="elId" |
|---|
| | | :id="elId" |
|---|
| | | :style="{ |
|---|
| | | width: widthPx + 'px', |
|---|
| | | height: widthPx + 'px' |
|---|
| | | }" |
|---|
| | | ></canvas> |
|---|
| | | <view class="tn-circle-progress__content"> |
|---|
| | | <slot v-if="$slots.default || $slots.$default"></slot> |
|---|
| | | <view v-else-if="showPercent" class="tn-circle-progress__content__percent">{{ percent + '%' }}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'tn-circle-progress', |
|---|
| | | props: { |
|---|
| | | // è¿åº¦ï¼ç¾åæ¯ï¼ |
|---|
| | | percent: { |
|---|
| | | type: Number, |
|---|
| | | default: 0, |
|---|
| | | validator: val => { |
|---|
| | | return val >= 0 && val <= 100 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // åç¯çº¿å®½ |
|---|
| | | borderWidth: { |
|---|
| | | type: Number, |
|---|
| | | default: 14 |
|---|
| | | }, |
|---|
| | | // æ´ä½åç宽度 |
|---|
| | | width: { |
|---|
| | | type: Number, |
|---|
| | | default: 200 |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºæ¡çº¹ |
|---|
| | | striped: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // æ¡çº¹æ¯å¦è¿å¨ |
|---|
| | | stripedActive: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ¿æ´»é¨åé¢è² |
|---|
| | | activeColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#01BEFF' |
|---|
| | | }, |
|---|
| | | // éæ¿æ´»é¨åé¢è² |
|---|
| | | inactiveColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#f0f0f0' |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºè¿åº¦æ¡å
é¨ç¾åæ¯å¼ |
|---|
| | | showPercent: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // åç¯æ§è¡å¨ç»çæ¶é´ï¼ms |
|---|
| | | duration: { |
|---|
| | | type: Number, |
|---|
| | | default: 1500 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // 微信å°ç¨åºä¸ä¸è½ä½¿ç¨this.$t.uuid()å½¢å¼å¨æçæidå¼ï¼å¦åä¼æ¥é |
|---|
| | | // #ifdef MP-WEIXIN |
|---|
| | | elBgId: 'tCircleProgressBgId', |
|---|
| | | elId: 'tCircleProgressElId', |
|---|
| | | // #endif |
|---|
| | | // #ifndef MP-WEIXIN |
|---|
| | | elBgId: this.$t.uuid(), |
|---|
| | | elId: this.$t.uuid(), |
|---|
| | | // #endif |
|---|
| | | // æ´»å¨åä¸ä¸æ |
|---|
| | | progressContext: null, |
|---|
| | | // 转æ¢æpx为åä½çèæ¯å®½åº¦ |
|---|
| | | widthPx: uni.upx2px(this.width || 200), |
|---|
| | | // 转æ¢æpx为åä½çåç¯å®½åº¦ |
|---|
| | | borderWidthPx: uni.upx2px(this.borderWidth || 14), |
|---|
| | | // canvasç»åçèµ·å§è§åº¦ï¼é»è®¤ä¸º-90度ï¼é¡ºæ¶é |
|---|
| | | startAngle: -90 * Math.PI / 180, |
|---|
| | | // å¨æä¿®æ¹è¿åº¦å¼çæ¶åï¼ä¿åè¿åº¦å¼çååååå¼ |
|---|
| | | newPercent: 0, |
|---|
| | | oldPercent: 0 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | percent(newVal, oldVal = 0) { |
|---|
| | | if (newVal > 100) newVal = 100 |
|---|
| | | if (oldVal < 0) oldVal = 0 |
|---|
| | | |
|---|
| | | this.newPercent = newVal |
|---|
| | | this.oldPercent = oldVal |
|---|
| | | setTimeout(() => { |
|---|
| | | // æ 论æ¯ç¾åæ¯å¼å¢å è¿æ¯åå°ï¼éè¦æä½è¿æ¯åæ¥çæ§çç¾åæ¯å¼ |
|---|
| | | // å°æ¤å¼åå°æè
æ°å¢å°æ°çç¾åæ¯å¼ |
|---|
| | | this.drawCircleByProgress(oldVal) |
|---|
| | | }, 50) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | // èµå¼ï¼ç¨äºå è½½å第ä¸ä¸ªç»åä½¿ç¨ |
|---|
| | | this.newPercent = this.percent; |
|---|
| | | this.oldPercent = 0; |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.drawProgressBg() |
|---|
| | | this.drawCircleByProgress(this.oldPercent) |
|---|
| | | }, 50) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // ç»å¶è¿åº¦æ¡èæ¯ |
|---|
| | | drawProgressBg() { |
|---|
| | | let ctx = uni.createCanvasContext(this.elBgId, this) |
|---|
| | | // 设置线宽 |
|---|
| | | ctx.setLineWidth(this.borderWidthPx) |
|---|
| | | // 设置é¢è² |
|---|
| | | ctx.setStrokeStyle(this.inactiveColor) |
|---|
| | | ctx.beginPath() |
|---|
| | | let radius = this.widthPx / 2 |
|---|
| | | ctx.arc(radius, radius, radius - this.borderWidthPx, 0, 360 * Math.PI / 180, false) |
|---|
| | | ctx.stroke() |
|---|
| | | ctx.draw() |
|---|
| | | }, |
|---|
| | | // ç»å¶å弧çè¿åº¦ |
|---|
| | | drawCircleByProgress(progress) { |
|---|
| | | // å¦æå·²ç»åå¨åæ¿æ¥ä½¿ç¨ |
|---|
| | | let ctx = this.progressContext |
|---|
| | | if (!ctx) { |
|---|
| | | ctx =uni.createCanvasContext(this.elId, this) |
|---|
| | | this.progressContext = ctx |
|---|
| | | } |
|---|
| | | ctx.setLineCap('round') |
|---|
| | | // 设置线æ¡å®½åº¦åé¢è² |
|---|
| | | ctx.setLineWidth(this.borderWidthPx) |
|---|
| | | ctx.setStrokeStyle(this.activeColor) |
|---|
| | | // å°æ»è¿æ¸¡æ¶é´é¤ä»¥100ï¼å¾åºæ¯ä¿®æ¹ç¾åä¹ä¸è¿åº¦æéçæ¶é´ |
|---|
| | | let preSecondTime = Math.floor(this.duration / 100) |
|---|
| | | // ç»æè§ç计ç®ä¾æ®ä¸ºï¼å°2Ïå为100份ï¼ä¹ä»¥å½åçè¿åº¦å¼ï¼å¾åºç»æ¢ç¹ç弧度å¼ï¼å èµ·å§è§ï¼ä¸ºæ´ä¸ªåä»é»è®¤ç |
|---|
| | | let endAngle = ((360 * Math.PI / 180) / 100) * progress + this.startAngle |
|---|
| | | let radius = this.widthPx / 2 |
|---|
| | | ctx.beginPath() |
|---|
| | | ctx.arc(radius, radius, radius - this.borderWidthPx, this.startAngle, endAngle, false) |
|---|
| | | ctx.stroke() |
|---|
| | | ctx.draw() |
|---|
| | | |
|---|
| | | // å¦æåæ´åæ°å¼å¤§äºæ§å¼ï¼æå³çå¢å¤§äºç¾åæ¯ |
|---|
| | | if (this.newPercent > this.oldPercent) { |
|---|
| | | // æ¯æ¬¡éå¢ç¾åä¹ä¸ |
|---|
| | | progress++ |
|---|
| | | // å¦ææ°å¢åçå¼ï¼å¤§äºéè¦è®¾ç½®çå¼ç¾åæ¯å¼ï¼åæ¢ç»§ç»å¢å |
|---|
| | | if (progress > this.newPercent) return |
|---|
| | | } else { |
|---|
| | | progress-- |
|---|
| | | if (progress < this.newPercent) return |
|---|
| | | } |
|---|
| | | setTimeout(() => { |
|---|
| | | // å®æ¶å¨ï¼æ¯æ¬¡æä½é´é为timeå¼ï¼ä¸ºäºè®©è¿åº¦æ¡æå¨ç»ææ |
|---|
| | | this.drawCircleByProgress(progress) |
|---|
| | | }, preSecondTime) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | |
|---|
| | | .tn-circle-progress { |
|---|
| | | position: relative; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: inline-flex; |
|---|
| | | /* #endif */ |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | background-color: transparent; |
|---|
| | | |
|---|
| | | &__canvas { |
|---|
| | | position: absolute; |
|---|
| | | |
|---|
| | | &-bg { |
|---|
| | | position: absolute; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__content { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | |
|---|
| | | &__percent { |
|---|
| | | font-size: 28rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="tn-collapse-item-class tn-collapse-item" :style="[itemStyle]"> |
|---|
| | | <!-- å¤´é¨ --> |
|---|
| | | <view |
|---|
| | | class="tn-collapse-item__head" |
|---|
| | | :style="[headStyle]" |
|---|
| | | :hover-stay-time="200" |
|---|
| | | :hover-class="hoverClass" |
|---|
| | | @tap.stop="headClick" |
|---|
| | | > |
|---|
| | | <block v-if="!$slots['title-all'] || !$slots['$title-all']"> |
|---|
| | | <view |
|---|
| | | v-if="!$slots.title || !$slots.$title" |
|---|
| | | class="tn-collapse-item__head__title tn-text-ellipsis" |
|---|
| | | :style="[ |
|---|
| | | { textAlign: align ? align : 'left'}, |
|---|
| | | isShow && activeStyle && !arrow ? activeStyle : '' |
|---|
| | | ]" |
|---|
| | | >{{ title }}</view> |
|---|
| | | <view v-else> |
|---|
| | | <slot name="title"></slot> |
|---|
| | | </view> |
|---|
| | | <view class="tn-collapse-item__head__icon__wrap"> |
|---|
| | | <view |
|---|
| | | v-if="arrow" |
|---|
| | | class="tn-icon-down tn-collapse-item__head__icon__arrow" |
|---|
| | | :class="{'tn-collapse-item__head__icon__arrow--active': isShow}" |
|---|
| | | :style="[arrowIconStyle]" |
|---|
| | | ></view> |
|---|
| | | </view> |
|---|
| | | </block> |
|---|
| | | <view v-else> |
|---|
| | | <slot name="title-all"></slot> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <!-- å
容 --> |
|---|
| | | <view |
|---|
| | | class="tn-collapse-item__body" |
|---|
| | | :style="[{ |
|---|
| | | height: isShow ? height + 'px' : '0' |
|---|
| | | }]" |
|---|
| | | > |
|---|
| | | <view class="tn-collapse-item__body__content" :id="elId" :style="[bodyStyle]"> |
|---|
| | | <slot></slot> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'tn-collapse-item', |
|---|
| | | props: { |
|---|
| | | // å±å¼ |
|---|
| | | open: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // å¯ä¸æ è¯ |
|---|
| | | name: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // æ é¢ |
|---|
| | | title: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // æ é¢å¯¹é½æ¹å¼ |
|---|
| | | align: { |
|---|
| | | type: String, |
|---|
| | | default: 'left' |
|---|
| | | }, |
|---|
| | | // ç¹å»ä¸æ¶èµ· |
|---|
| | | disabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // æ´»å¨æ¶æ ·å¼ |
|---|
| | | activeStyle: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ è¯ |
|---|
| | | index: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | arrowIconStyle() { |
|---|
| | | let style = {} |
|---|
| | | if (this.arrowColor) { |
|---|
| | | style.color = this.arrowColor |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | isShow: false, |
|---|
| | | elId: this.$t.uuid(), |
|---|
| | | // bodyé«åº¦ |
|---|
| | | height: 0, |
|---|
| | | // 头é¨æ ·å¼ |
|---|
| | | headStyle: {}, |
|---|
| | | // 主ä½æ ·å¼ |
|---|
| | | bodyStyle: {}, |
|---|
| | | // itemæ ·å¼ |
|---|
| | | itemStyle: {}, |
|---|
| | | // æ¾ç¤ºå³è¾¹ç®å¤´ |
|---|
| | | arrow: true, |
|---|
| | | // ç®å¤´é¢è² |
|---|
| | | arrowColor: '', |
|---|
| | | // ç¹å»å¤´é¨æ¶çæææ ·å¼ |
|---|
| | | hoverClass: '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | open(value) { |
|---|
| | | this.isShow = value |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.parent = false |
|---|
| | | this.isShow = this.open |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.init() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // å¼æ¥è·åå
容æè
ä¿®æ¹äºå
容æ¶éæ°è·åå
容çä¿¡æ¯ |
|---|
| | | init() { |
|---|
| | | this.parent = this.$t.$parent.call(this, 'tn-collapse') |
|---|
| | | if (this.parent) { |
|---|
| | | this.nameSync = this.name ? this.name : this.parent.childrens.length |
|---|
| | | // ä¸åå¨ææ·»å 对åºå®ä¾ |
|---|
| | | !this.parent.childrens.includes(this) && this.parent.childrens.push(this) |
|---|
| | | this.headStyle = this.parent.headStyle |
|---|
| | | this.bodyStyle = this.parent.bodyStyle |
|---|
| | | this.itemStyle = this.parent.itemStyle |
|---|
| | | this.arrow = this.parent.arrow |
|---|
| | | this.arrowColor = this.parent.arrowColor |
|---|
| | | this.hoverClass = this.parent.hoverClass |
|---|
| | | } |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.queryRect() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // ç¹å»å¤´é¨ |
|---|
| | | headClick() { |
|---|
| | | if (this.disabled) return |
|---|
| | | if (this.parent && this.parent.accordion) { |
|---|
| | | this.parent.childrens.map(child => { |
|---|
| | | // å¦ææ¯æé£ç´æ¨¡å¼ï¼å°å
¶ä»çitemå
³é |
|---|
| | | if (this !== child) { |
|---|
| | | child.isShow = false |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.isShow = !this.isShow |
|---|
| | | // 触åä¿®æ¹äºä»¶ |
|---|
| | | this.$emit('change', { |
|---|
| | | index: this.index, |
|---|
| | | show: this.isShow |
|---|
| | | }) |
|---|
| | | // åªæå¨æå¼æ¶æ触åç¶å
ç´ çchange |
|---|
| | | if (this.isShow) this.parent && this.parent.onChange() |
|---|
| | | this.$forceUpdate() |
|---|
| | | }, |
|---|
| | | // æ¥è¯¢å
容é«åº¦ |
|---|
| | | queryRect() { |
|---|
| | | this._tGetRect('#'+this.elId).then(res => { |
|---|
| | | this.height = res.height |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | |
|---|
| | | .tn-collapse-item { |
|---|
| | | |
|---|
| | | &__head { |
|---|
| | | position: relative; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | color: $tn-font-color; |
|---|
| | | font-size: 30rpx; |
|---|
| | | line-height: 1; |
|---|
| | | padding: 24rpx 0; |
|---|
| | | padding-left: 24rpx; |
|---|
| | | text-align: left; |
|---|
| | | background-color: #FFFFFF; |
|---|
| | | |
|---|
| | | &__title { |
|---|
| | | flex: 1; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__icon { |
|---|
| | | &__arrow { |
|---|
| | | transition: all 0.3s; |
|---|
| | | margin-right: 20rpx; |
|---|
| | | margin-left: 14rpx; |
|---|
| | | font-size: inherit; |
|---|
| | | |
|---|
| | | &--active { |
|---|
| | | transform: rotate(180deg); |
|---|
| | | transform-origin: center center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__body { |
|---|
| | | transition: all 0.3s; |
|---|
| | | overflow: hidden; |
|---|
| | | |
|---|
| | | &__content { |
|---|
| | | overflow: hidden; |
|---|
| | | font-size: 28rpx; |
|---|
| | | color: $tn-font-color; |
|---|
| | | text-align: left; |
|---|
| | | background-color: #FFFFFF; |
|---|
| | | padding-left: 24rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="tn-collapse-class tn-collapse"> |
|---|
| | | <slot></slot> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'tn-collapse', |
|---|
| | | props: { |
|---|
| | | // æ¯å¦ä¸ºæé£ç´ |
|---|
| | | accordion: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // 头é¨æ ·å¼ |
|---|
| | | headStyle: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 主é¢æ ·å¼ |
|---|
| | | bodyStyle: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ¯ä¸ä¸ªitemçæ ·å¼ |
|---|
| | | itemStyle: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ¾ç¤ºç®å¤´ |
|---|
| | | arrow: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // ç®å¤´é¢è² |
|---|
| | | arrowColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#AAAAAA' |
|---|
| | | }, |
|---|
| | | // ç¹å»æ é¢æ æ¶çæåæ ·å¼ |
|---|
| | | hoverClass: { |
|---|
| | | type: String, |
|---|
| | | default: 'tn-hover' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | parentData() { |
|---|
| | | return [this.headStyle, this.bodyStyle, this.itemStyle, this.arrow, this.arrowColor, this.hoverClass] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | parentData() { |
|---|
| | | // å¦æç¶ç»ä»¶çåæ°åçååéæ°åå§ååç»ä»¶çä¿¡æ¯ |
|---|
| | | if (this.childrens.length > 0) { |
|---|
| | | this.init() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.childrens = [] |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // éæ°åå§åå
é¨ææåå
ç´ è®¡ç®é«åº¦ï¼å¼æ¥è·åæ°æ®æ¶éæ°æ¸²æ |
|---|
| | | init() { |
|---|
| | | this.childrens.forEach((child, index) => { |
|---|
| | | child.init() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // collapseItem被ç¹å»æ¶ç±collapseItemè°ç¨ç¶ç»ä»¶ |
|---|
| | | onChange() { |
|---|
| | | let activeItem = [] |
|---|
| | | this.childrens.forEach((child, index) => { |
|---|
| | | if (child.isShow) { |
|---|
| | | activeItem.push(child.nameSync) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | // å¦ææ¶æé£ç´æ¨¡å¼ï¼åªæä¸ä¸ªå¹é
ç»æï¼å³activeItemé¿åº¦ä¸º1 |
|---|
| | | if (this.accordion) activeItem = activeItem.join(',') |
|---|
| | | this.$emit('change', activeItem) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <text |
|---|
| | | class="tn-color-icon-class tn-color-icon" |
|---|
| | | :class="[ |
|---|
| | | 'tn-color-icon-' + name |
|---|
| | | ]" |
|---|
| | | :style="{ |
|---|
| | | fontSize: size + unit, |
|---|
| | | margin: margin |
|---|
| | | }" |
|---|
| | | @tap="handleClick" |
|---|
| | | ></text> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'tn-color-icon', |
|---|
| | | props: { |
|---|
| | | // ç´¢å¼ |
|---|
| | | index: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: '0' |
|---|
| | | }, |
|---|
| | | // å¾æ å称 |
|---|
| | | name: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // å¾æ å¤§å° |
|---|
| | | size: { |
|---|
| | | type: Number, |
|---|
| | | default:32 |
|---|
| | | }, |
|---|
| | | // 大å°åä½ |
|---|
| | | unit: { |
|---|
| | | type: String, |
|---|
| | | default: 'px' |
|---|
| | | }, |
|---|
| | | // å¤è¾¹è· |
|---|
| | | margin: { |
|---|
| | | type: String, |
|---|
| | | default: '0' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // å¤çç¹å»äºä»¶ |
|---|
| | | handleClick() { |
|---|
| | | this.$emit("click", { |
|---|
| | | index: Number(this.index) |
|---|
| | | }) |
|---|
| | | this.$emit("tap", { |
|---|
| | | index: Number(this.index) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | @charset "UTF-8"; |
|---|
| | | |
|---|
| | | @font-face { |
|---|
| | | font-family: "tuniaoColorFont"; /* Project id 2445412 */ |
|---|
| | | /* Color fonts */ |
|---|
| | | src: url('iconfont.woff2?t=1632654518618') format('woff2'); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon { |
|---|
| | | font-family: "tuniaoColorFont" !important; |
|---|
| | | font-size: 16px; |
|---|
| | | font-style: normal; |
|---|
| | | -webkit-font-smoothing: antialiased; |
|---|
| | | -moz-osx-font-smoothing: grayscale; |
|---|
| | | text-align: center; |
|---|
| | | text-decoration: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-logo-github:before { |
|---|
| | | content: "\e601"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-logo-qq:before { |
|---|
| | | content: "\e602"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-logo-weixin:before { |
|---|
| | | content: "\e603"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-logo-alipay:before { |
|---|
| | | content: "\e604"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-logo-weibo:before { |
|---|
| | | content: "\e605"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-logo-dingtalk:before { |
|---|
| | | content: "\e606"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-safe:before { |
|---|
| | | content: "\e607"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-wifi:before { |
|---|
| | | content: "\e608"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-help:before { |
|---|
| | | content: "\e609"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-tag:before { |
|---|
| | | content: "\e60a"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-play:before { |
|---|
| | | content: "\e60b"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-stopwatch:before { |
|---|
| | | content: "\e60c"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-home:before { |
|---|
| | | content: "\e60d"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-map:before { |
|---|
| | | content: "\e60e"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-book:before { |
|---|
| | | content: "\e60f"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-qrcode:before { |
|---|
| | | content: "\e610"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-discover:before { |
|---|
| | | content: "\e611"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-visitor:before { |
|---|
| | | content: "\e612"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-menu:before { |
|---|
| | | content: "\e613"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-renew:before { |
|---|
| | | content: "\e614"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-business:before { |
|---|
| | | content: "\e615"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-telephone:before { |
|---|
| | | content: "\e616"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-medicine:before { |
|---|
| | | content: "\e617"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-chicken:before { |
|---|
| | | content: "\e618"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-clock:before { |
|---|
| | | content: "\e619"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-download:before { |
|---|
| | | content: "\e61a"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-lamp:before { |
|---|
| | | content: "\e61b"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-hourglass:before { |
|---|
| | | content: "\e61c"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-calendar:before { |
|---|
| | | content: "\e61d"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-bluetooth:before { |
|---|
| | | content: "\e61e"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-fish:before { |
|---|
| | | content: "\e61f"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-seal:before { |
|---|
| | | content: "\e620"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-remind:before { |
|---|
| | | content: "\e621"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-music:before { |
|---|
| | | content: "\e622"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-email:before { |
|---|
| | | content: "\e623"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-medal:before { |
|---|
| | | content: "\e624"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-image:before { |
|---|
| | | content: "\e625"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-network:before { |
|---|
| | | content: "\e626"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-wallet:before { |
|---|
| | | content: "\e627"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-program:before { |
|---|
| | | content: "\e628"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-shrimp:before { |
|---|
| | | content: "\e629"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-collect:before { |
|---|
| | | content: "\e62a"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-screw:before { |
|---|
| | | content: "\e62b"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-set:before { |
|---|
| | | content: "\e62c"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-userfavorite:before { |
|---|
| | | content: "\e62d"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-useradd:before { |
|---|
| | | content: "\e62e"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-honor:before { |
|---|
| | | content: "\e62f"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-shop:before { |
|---|
| | | content: "\e630"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-usercard:before { |
|---|
| | | content: "\e631"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-school:before { |
|---|
| | | content: "\e632"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-user:before { |
|---|
| | | content: "\e633"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-internet:before { |
|---|
| | | content: "\e634"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-time:before { |
|---|
| | | content: "\e635"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-topic:before { |
|---|
| | | content: "\e636"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-phone:before { |
|---|
| | | content: "\e637"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-usertable:before { |
|---|
| | | content: "\e638"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-userset:before { |
|---|
| | | content: "\e639"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tn-color-icon-game:before { |
|---|
| | | content: "\e63a"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="tn-column-notice-class tn-column-notice" |
|---|
| | | :class="[backgroundColorClass]" |
|---|
| | | :style="[noticeStyle]" |
|---|
| | | > |
|---|
| | | <!-- å·¦å¾æ --> |
|---|
| | | <view class="tn-column-notice__icon"> |
|---|
| | | <view |
|---|
| | | v-if="leftIcon" |
|---|
| | | class="tn-column-notice__icon--left" |
|---|
| | | :class="[`tn-icon-${leftIconName}`,fontColorClass]" |
|---|
| | | :style="[fontStyle('leftIcon')]" |
|---|
| | | @tap="clickLeftIcon"></view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <!-- æ»å¨æ¾ç¤ºå
容 --> |
|---|
| | | <swiper class="tn-column-notice__swiper" :style="[swiperStyle]" :vertical="vertical" circular :autoplay="autoplay && playStatus === 'play'" :interval="duration" @change="change"> |
|---|
| | | <swiper-item v-for="(item, index) in list" :key="index" class="tn-column-notice__swiper--item"> |
|---|
| | | <view |
|---|
| | | class="tn-column-notice__swiper--content tn-text-ellipsis" |
|---|
| | | :class="[fontColorClass]" |
|---|
| | | :style="[fontStyle()]" |
|---|
| | | @tap="click(index)" |
|---|
| | | >{{ item }}</view> |
|---|
| | | </swiper-item> |
|---|
| | | </swiper> |
|---|
| | | |
|---|
| | | <!-- å³å¾æ --> |
|---|
| | | <view class="tn-column-notice__icon"> |
|---|
| | | <view |
|---|
| | | v-if="rightIcon" |
|---|
| | | class="tn-column-notice__icon--right" |
|---|
| | | :class="[`tn-icon-${rightIconName}`,fontColorClass]" |
|---|
| | | :style="[fontStyle('rightIcon')]" |
|---|
| | | @tap="clickRightIcon"></view> |
|---|
| | | <view |
|---|
| | | v-if="closeBtn" |
|---|
| | | class="tn-column-notice__icon--right" |
|---|
| | | :class="[`tn-icon-close`,fontColorClass]" |
|---|
| | | :style="[fontStyle('close')]" |
|---|
| | | @tap="close"></view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import componentsColorMixin from '../../libs/mixin/components_color.js' |
|---|
| | | export default { |
|---|
| | | name: 'tn-column-notice', |
|---|
| | | mixins: [componentsColorMixin], |
|---|
| | | props: { |
|---|
| | | // æ¾ç¤ºçå
容 |
|---|
| | | list: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤º |
|---|
| | | show: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // ææ¾ç¶æ |
|---|
| | | // play -> ææ¾ paused -> æå |
|---|
| | | playStatus: { |
|---|
| | | type: String, |
|---|
| | | default: 'play' |
|---|
| | | }, |
|---|
| | | // æ»å¨æ¹å |
|---|
| | | // horizontal -> æ°´å¹³æ»å¨ vertical -> åç´æ»å¨ |
|---|
| | | mode: { |
|---|
| | | type: String, |
|---|
| | | default: 'horizontal' |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå·¦è¾¹å¾æ |
|---|
| | | leftIcon: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // 左边å¾æ çå称 |
|---|
| | | leftIconName: { |
|---|
| | | type: String, |
|---|
| | | default: 'sound' |
|---|
| | | }, |
|---|
| | | // 左边å¾æ çå¤§å° |
|---|
| | | leftIconSize: { |
|---|
| | | type: Number, |
|---|
| | | default: 34 |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå³è¾¹çå¾æ |
|---|
| | | rightIcon: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // å³è¾¹å¾æ çå称 |
|---|
| | | rightIconName: { |
|---|
| | | type: String, |
|---|
| | | default: 'right' |
|---|
| | | }, |
|---|
| | | // å³è¾¹å¾æ çå¤§å° |
|---|
| | | rightIconSize: { |
|---|
| | | type: Number, |
|---|
| | | default: 26 |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå
³éæé® |
|---|
| | | closeBtn: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // åè§ |
|---|
| | | radius: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // å
è¾¹è· |
|---|
| | | padding: { |
|---|
| | | type: String, |
|---|
| | | default: '18rpx 24rpx' |
|---|
| | | }, |
|---|
| | | // èªå¨ææ¾ |
|---|
| | | autoplay: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ»å¨å¨æ |
|---|
| | | duration: { |
|---|
| | | type: Number, |
|---|
| | | default: 2000 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | fontStyle() { |
|---|
| | | return (type) => { |
|---|
| | | let style = {} |
|---|
| | | style.color = this.fontColorStyle ? this.fontColorStyle : '' |
|---|
| | | style.fontSize = this.fontSizeStyle ? this.fontSizeStyle : '' |
|---|
| | | if (type === 'leftIcon' && this.leftIconSize) { |
|---|
| | | style.fontSize = this.leftIconSize + 'rpx' |
|---|
| | | } |
|---|
| | | if (type === 'rightIcon' && this.rightIconSize) { |
|---|
| | | style.fontSize = this.rightIconSize + 'rpx' |
|---|
| | | } |
|---|
| | | if (type === 'close') { |
|---|
| | | style.fontSize = '24rpx' |
|---|
| | | } |
|---|
| | | |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | noticeStyle() { |
|---|
| | | let style = {} |
|---|
| | | style.backgroundColor = this.backgroundColorStyle ? this.backgroundColorStyle : 'transparent' |
|---|
| | | if (this.padding) style.padding = this.padding |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | swiperStyle() { |
|---|
| | | let style = {} |
|---|
| | | style.height = this.fontSize ? this.fontSize + 6 + this.fontUnit : '32rpx' |
|---|
| | | style.lineHeight = style.height |
|---|
| | | |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | // æ è®°æ¯å¦ä¸ºåç´ |
|---|
| | | vertical() { |
|---|
| | | if (this.mode === 'horizontal') return false |
|---|
| | | else return true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // ç¹å»äºéç¥æ |
|---|
| | | click(index) { |
|---|
| | | this.$emit('click', index) |
|---|
| | | }, |
|---|
| | | // ç¹å»äºå
³éæé® |
|---|
| | | close() { |
|---|
| | | this.$emit('close') |
|---|
| | | }, |
|---|
| | | // ç¹å»äºå·¦è¾¹å¾æ |
|---|
| | | clickLeftIcon() { |
|---|
| | | this.$emit('clickLeft') |
|---|
| | | }, |
|---|
| | | // ç¹å»äºå³è¾¹å¾æ |
|---|
| | | clickRightIcon() { |
|---|
| | | this.$emit('clickRight') |
|---|
| | | }, |
|---|
| | | // åæ¢æ¶æ¯æ¶é´ |
|---|
| | | change(event) { |
|---|
| | | let index = event.detail.current |
|---|
| | | if (index === this.list.length - 1) { |
|---|
| | | this.$emit('end') |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | |
|---|
| | | .tn-column-notice { |
|---|
| | | width: 100%; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | flex-wrap: nowrap; |
|---|
| | | overflow: hidden; |
|---|
| | | |
|---|
| | | &__swiper { |
|---|
| | | height: auto; |
|---|
| | | flex: 1; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | margin-left: 12rpx; |
|---|
| | | |
|---|
| | | &--item { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--content { |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__icon { |
|---|
| | | &--left { |
|---|
| | | display: inline-flex; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--right { |
|---|
| | | margin-left: 12rpx; |
|---|
| | | display: inline-flex; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="tn-countdown-class tn-countdown"> |
|---|
| | | <view |
|---|
| | | v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '00'))" |
|---|
| | | class="tn-countdown__item" |
|---|
| | | :class="[backgroundColorClass]" |
|---|
| | | :style="[itemStyle]" |
|---|
| | | > |
|---|
| | | <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]"> |
|---|
| | | {{ d }} |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | v-if="showHours && (hideZeroDay || (!hideZeroDay && d != '00'))" |
|---|
| | | class="tn-countdown__separator" |
|---|
| | | :style="{ |
|---|
| | | fontSize: separatorSize + 'rpx', |
|---|
| | | color: separatorColor, |
|---|
| | | paddingBottom: separator === 'en' ? '4rpx' : 0 |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | {{ separator === 'en' ? ':' : '天'}} |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <view |
|---|
| | | v-if="showHours" |
|---|
| | | class="tn-countdown__item" |
|---|
| | | :class="[backgroundColorClass]" |
|---|
| | | :style="[itemStyle]" |
|---|
| | | > |
|---|
| | | <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]"> |
|---|
| | | {{ h }} |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | v-if="showMinutes" |
|---|
| | | class="tn-countdown__separator" |
|---|
| | | :style="{ |
|---|
| | | fontSize: separatorSize + 'rpx', |
|---|
| | | color: separatorColor, |
|---|
| | | paddingBottom: separator === 'en' ? '4rpx' : 0 |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | {{ separator === 'en' ? ':' : 'æ¶'}} |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <view |
|---|
| | | v-if="showMinutes" |
|---|
| | | class="tn-countdown__item" |
|---|
| | | :class="[backgroundColorClass]" |
|---|
| | | :style="[itemStyle]" |
|---|
| | | > |
|---|
| | | <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]"> |
|---|
| | | {{ m }} |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | v-if="showSeconds" |
|---|
| | | class="tn-countdown__separator" |
|---|
| | | :style="{ |
|---|
| | | fontSize: separatorSize + 'rpx', |
|---|
| | | color: separatorColor, |
|---|
| | | paddingBottom: separator === 'en' ? '4rpx' : 0 |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | {{ separator === 'en' ? ':' : 'å'}} |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <view |
|---|
| | | v-if="showSeconds" |
|---|
| | | class="tn-countdown__item" |
|---|
| | | :class="[backgroundColorClass]" |
|---|
| | | :style="[itemStyle]" |
|---|
| | | > |
|---|
| | | <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]"> |
|---|
| | | {{ s }} |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | v-if="showSeconds && separator === 'cn'" |
|---|
| | | class="tn-countdown__separator" |
|---|
| | | :style="{ |
|---|
| | | fontSize: separatorSize + 'rpx', |
|---|
| | | color: separatorColor, |
|---|
| | | paddingBottom: separator === 'en' ? '4rpx' : 0 |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | ç§ |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import componentsColorMixin from '../../libs/mixin/components_color.js' |
|---|
| | | export default { |
|---|
| | | name: 'tn-count-down', |
|---|
| | | mixins: [componentsColorMixin], |
|---|
| | | props: { |
|---|
| | | // å计æ¶æ¶é´ï¼ç§ä½ä¸ºåä½ |
|---|
| | | timestamp: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // æ¯å¦èªå¨å¼å§ |
|---|
| | | autoplay: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ°åæ¡é«åº¦ |
|---|
| | | height: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: 'auto' |
|---|
| | | }, |
|---|
| | | // åé符类å |
|---|
| | | // en -> 使ç¨è±æçåå· cn -> 使ç¨ä¸æè¿è¡åå² |
|---|
| | | separator: { |
|---|
| | | type: String, |
|---|
| | | default: 'en' |
|---|
| | | }, |
|---|
| | | // åå²ç¬¦å¤§å° |
|---|
| | | separatorSize: { |
|---|
| | | type: Number, |
|---|
| | | default: 30 |
|---|
| | | }, |
|---|
| | | // åé符é¢è² |
|---|
| | | separatorColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#080808' |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºè¾¹æ¡ |
|---|
| | | showBorder: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // è¾¹æ¡é¢è² |
|---|
| | | borderColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#080808' |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºç§ |
|---|
| | | showSeconds: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå |
|---|
| | | showMinutes: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºæ¶ |
|---|
| | | showHours: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå¤© |
|---|
| | | showDays: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // å¦æå½å¤©çé¨å为0æ¶ï¼æ¯å¦éèä¸æ¾ç¤º |
|---|
| | | hideZeroDay: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // å计æ¶itemçæ ·å¼ |
|---|
| | | itemStyle() { |
|---|
| | | let style = {} |
|---|
| | | if (this.height) { |
|---|
| | | style.height = this.$t.string.getLengthUnitValue(this.height) |
|---|
| | | style.width = style.height |
|---|
| | | } |
|---|
| | | if (this.showBorder) { |
|---|
| | | style.borderStyle = 'solid' |
|---|
| | | style.borderColor = this.borderColor |
|---|
| | | style.borderWidth = '1rpx' |
|---|
| | | } |
|---|
| | | style.backgroundColor = this.backgroundColorStyle || '#FFFFFF' |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | // å计æ¶æ°åæ ·å¼ |
|---|
| | | letterStyle() { |
|---|
| | | let style = {} |
|---|
| | | style.fontSize = this.fontSizeStyle || '30rpx' |
|---|
| | | style.color = this.fontColorStyle || '#080808' |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | d: '00', |
|---|
| | | h: '00', |
|---|
| | | m: '00', |
|---|
| | | s: '00', |
|---|
| | | // å®æ¶å¨ |
|---|
| | | timer: null, |
|---|
| | | // è®°å½å计è¿ç¨ä¸ååçç§æ° |
|---|
| | | seconds: 0 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | // çå¬æ¶é´æ³åå |
|---|
| | | timestamp(value) { |
|---|
| | | this.clearTimer() |
|---|
| | | this.start() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | // å¦ææ¶èªå¨å计æ¶ï¼å è½½å®æå¼å§è®¡æ¶ |
|---|
| | | this.autoplay && this.timestamp && this.start() |
|---|
| | | }, |
|---|
| | | beforeDestroy() { |
|---|
| | | this.clearTimer() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // å¼å§åè®¡æ¶ |
|---|
| | | start() { |
|---|
| | | // é¿å
å¯è½åºç°çå计æ¶éå æ
åµ |
|---|
| | | this.clearTimer() |
|---|
| | | if (this.timestamp <= 0) return |
|---|
| | | this.seconds = Number(this.timestamp) |
|---|
| | | this.formatTime(this.seconds) |
|---|
| | | this.timer = setInterval(() => { |
|---|
| | | this.seconds-- |
|---|
| | | // ååºchangeäºä»¶ |
|---|
| | | this.$emit('change', this.seconds) |
|---|
| | | if (this.seconds < 0) { |
|---|
| | | return this.end() |
|---|
| | | } |
|---|
| | | this.formatTime(this.seconds) |
|---|
| | | }, 1000) |
|---|
| | | }, |
|---|
| | | // æ ¼å¼åæ¶é´ |
|---|
| | | formatTime(seconds) { |
|---|
| | | // å°äºçäº0çè¯ï¼ç»æåè®¡æ¶ |
|---|
| | | seconds <= 0 && this.end() |
|---|
| | | let [day, hour, minute, second] = [0, 0, 0, 0] |
|---|
| | | day = Math.floor(seconds / (60 * 60 * 24)) |
|---|
| | | // å¦æä¸æ¾ç¤ºå¤©ï¼åå°å¤©å¯¹åºçå°æ¶è®¡å
¥å°å°æ¶ä¸ |
|---|
| | | // å
æå½åçhour计ç®åºæ¥ä¾ååç§ä½¿ç¨ |
|---|
| | | hour = Math.floor(seconds / (60 * 60)) - (day * 24) |
|---|
| | | let showHour = null |
|---|
| | | if (this.showDays) { |
|---|
| | | showHour = hour |
|---|
| | | } else { |
|---|
| | | // å°å¤©æ°å¯¹åºçå°æ¶å å
¥å°æ¶ä¸è¿è¡æ¾ç¤º |
|---|
| | | showHour = Math.floor(seconds / (60 * 60)) |
|---|
| | | } |
|---|
| | | minute = Math.floor(seconds / 60) - (hour * 60) - (day * 24 * 60) |
|---|
| | | second = Math.floor(seconds) - (minute * 60) - (hour * 60 * 60) - (day * 24 * 60 * 60) |
|---|
| | | // å¦æå°äº0å¨åé¢è¿è¡è¡¥0æä½ |
|---|
| | | showHour = this.$t.number.formatNumberAddZero(showHour) |
|---|
| | | minute = this.$t.number.formatNumberAddZero(minute) |
|---|
| | | second = this.$t.number.formatNumberAddZero(second) |
|---|
| | | day = this.$t.number.formatNumberAddZero(day) |
|---|
| | | |
|---|
| | | this.d = day |
|---|
| | | this.h = showHour |
|---|
| | | this.m = minute |
|---|
| | | this.s = second |
|---|
| | | }, |
|---|
| | | // å计æ¶ç»æ |
|---|
| | | end() { |
|---|
| | | this.clearTimer() |
|---|
| | | this.$emit('end') |
|---|
| | | }, |
|---|
| | | // æ¸
é¤åè®¡æ¶ |
|---|
| | | clearTimer() { |
|---|
| | | if (this.timer !== null) { |
|---|
| | | clearInterval(this.timer) |
|---|
| | | this.timer = null |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | |
|---|
| | | .tn-countdown { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: inline-flex; |
|---|
| | | /* #endif */ |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | box-sizing: content-box; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | padding: 2rpx; |
|---|
| | | border-radius: 6rpx; |
|---|
| | | white-space: nowrap; |
|---|
| | | transform: translateZ(0); |
|---|
| | | |
|---|
| | | &__time { |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | line-height: 1; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__separator { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | padding: 0 5rpx; |
|---|
| | | line-height: 1; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="tn-count-scroll-class tn-count-scroll"> |
|---|
| | | <view |
|---|
| | | v-for="(item, index) in columns" |
|---|
| | | :key="index" |
|---|
| | | class="tn-count-scroll__box" |
|---|
| | | :style="{ |
|---|
| | | width: $t.string.getLengthUnitValue(width), |
|---|
| | | height: heightPxValue + 'px' |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="tn-count-scroll__column" |
|---|
| | | :style="{ |
|---|
| | | transform: `translate3d(0, -${keys[index] * heightPxValue}px, 0)`, |
|---|
| | | transitionDuration: `${duration}s` |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | v-for="(value, value_index) in item" |
|---|
| | | :key="value_index" |
|---|
| | | class="tn-count-scroll__column__item" |
|---|
| | | :class="[fontColorClass]" |
|---|
| | | :style="{ |
|---|
| | | height: heightPxValue + 'px', |
|---|
| | | lineHeight: heightPxValue + 'px', |
|---|
| | | fontSize: fontSizeStyle || '32rpx', |
|---|
| | | fontWeight: bold ? 'bold': 'normal', |
|---|
| | | color: fontColorStyle || '#080808' |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | {{ value }} |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import componentsColorMixin from '../../libs/mixin/components_color.js' |
|---|
| | | export default { |
|---|
| | | name: 'tn-count-scroll', |
|---|
| | | mixins: [componentsColorMixin], |
|---|
| | | props: { |
|---|
| | | value: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // è¡é« |
|---|
| | | height: { |
|---|
| | | type: Number, |
|---|
| | | default: 32 |
|---|
| | | }, |
|---|
| | | // å个åç宽度 |
|---|
| | | width: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: 'auto' |
|---|
| | | }, |
|---|
| | | // æ¯å¦å ç² |
|---|
| | | bold: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // æç»æ¶é´ |
|---|
| | | duration: { |
|---|
| | | type: Number, |
|---|
| | | default: 1.2 |
|---|
| | | }, |
|---|
| | | // ååä½åå²ç¬¦ |
|---|
| | | decimalSeparator: { |
|---|
| | | type: String, |
|---|
| | | default: '.' |
|---|
| | | }, |
|---|
| | | // ååä½åå²ç¬¦ |
|---|
| | | thousandthsSeparator: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | heightPxValue() { |
|---|
| | | return uni.upx2px(this.height || 0) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // æ¯åçæ°æ® |
|---|
| | | columns: [], |
|---|
| | | // æ¯å对åºå¼æå¨çæ»å¨ä½ç½® |
|---|
| | | keys: [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | value(val) { |
|---|
| | | this.initColumn(val) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | // 为äºè¾¾å°ä¸è¿å
¥å°±ææ»å¨ææï¼å»¶è¿æ§è¡åå§å |
|---|
| | | this.initColumn() |
|---|
| | | setTimeout(() => { |
|---|
| | | this.initColumn(this.value) |
|---|
| | | }, 20) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // åå§åæ¯ä¸åçæ°æ® |
|---|
| | | initColumn(val) { |
|---|
| | | val = val + '' |
|---|
| | | let digit = val.length, |
|---|
| | | columnArray = [], |
|---|
| | | rows = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; |
|---|
| | | for (let i = 0; i < digit; i++) { |
|---|
| | | if (val[i] === this.decimalSeparator || val[i] === this.thousandthsSeparator) { |
|---|
| | | columnArray.push(val[i]) |
|---|
| | | } else { |
|---|
| | | columnArray.push(rows) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.columns = columnArray |
|---|
| | | this.roll(val) |
|---|
| | | }, |
|---|
| | | // æ»å¨å¤ç |
|---|
| | | roll(value) { |
|---|
| | | let valueArray = value.toString().split(''), |
|---|
| | | lengths = this.columns.length, |
|---|
| | | indexs = []; |
|---|
| | | |
|---|
| | | while (valueArray.length) { |
|---|
| | | let figure = valueArray.pop() |
|---|
| | | if (figure === this.decimalSeparator || figure === this.thousandthsSeparator) { |
|---|
| | | indexs.unshift(0) |
|---|
| | | } else { |
|---|
| | | indexs.unshift(Number(figure)) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | while(indexs.length < lengths) { |
|---|
| | | indexs.unshift(0) |
|---|
| | | } |
|---|
| | | this.keys = indexs |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | |
|---|
| | | .tn-count-scroll { |
|---|
| | | display: inline-flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | |
|---|
| | | &__box { |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__column { |
|---|
| | | transform: translate3d(0, 0, 0); |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | flex-direction: column; |
|---|
| | | transition-timing-function: cubic-bezier(0, 1, 0, 1); |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="tn-count-num-class tn-count-num" |
|---|
| | | :class="[fontColorClass]" |
|---|
| | | :style="{ |
|---|
| | | fontSize: fontSizeStyle || '50rpx', |
|---|
| | | fontWeight: bold ? 'bold' : 'normal', |
|---|
| | | color: fontColorStyle || '#080808' |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | {{ displayValue }} |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import componentsColorMixin from '../../libs/mixin/components_color.js' |
|---|
| | | export default { |
|---|
| | | name: 'tn-count-to', |
|---|
| | | mixins: [componentsColorMixin], |
|---|
| | | props: { |
|---|
| | | // å¼å§çæ°å¼ï¼é»è®¤ä¸º0 |
|---|
| | | startVal: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // ç»æç®æ æ°å¼ |
|---|
| | | endVal: { |
|---|
| | | type: Number, |
|---|
| | | default: 0, |
|---|
| | | required: true |
|---|
| | | }, |
|---|
| | | // æ¯å¦èªå¨å¼å§ |
|---|
| | | autoplay: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ»å¨å°ç®æ å¼çæç»æ¶é´ï¼åä½ä¸ºæ¯«ç§ |
|---|
| | | duration: { |
|---|
| | | type: Number, |
|---|
| | | default: 2000 |
|---|
| | | }, |
|---|
| | | // æ¯å¦å¨å³å°ç»æçæ¶å使ç¨ç¼æ
¢æ»å¨çææ |
|---|
| | | useEasing: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ¾ç¤ºçå°æ°ä½æ° |
|---|
| | | decimals: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // åè¿å¶çåå²ç¬¦ |
|---|
| | | decimalSeparator: { |
|---|
| | | type: String, |
|---|
| | | default: '.' |
|---|
| | | }, |
|---|
| | | // ååä½çåé符 |
|---|
| | | // 类似éé¢çåå²(ï¿¥23,321.05ä¸ç",") |
|---|
| | | thousandthsSeparator: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå ç²åä½ |
|---|
| | | bold: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | countDown() { |
|---|
| | | return this.startVal > this.endVal |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | localStartVal: this.startVal, |
|---|
| | | localDuration: this.duration, |
|---|
| | | // æ¾ç¤ºçæ°å¼ |
|---|
| | | displayValue: this.formatNumber(this.startVal), |
|---|
| | | // æå°çæ°å¼ |
|---|
| | | printValue: null, |
|---|
| | | // æ¯å¦æå |
|---|
| | | paused: false, |
|---|
| | | // å¼å§æ¶é´æ³ |
|---|
| | | startTime: null, |
|---|
| | | // åçæ¶é´æ³ |
|---|
| | | remainingTime: null, |
|---|
| | | // å½åæ¶é´æ³ |
|---|
| | | timestamp: null, |
|---|
| | | // ä¸ä¸æ¬¡çæ¶é´æ³ |
|---|
| | | lastTime: 0, |
|---|
| | | rAF: null |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | startVal() { |
|---|
| | | this.autoplay && this.start() |
|---|
| | | }, |
|---|
| | | endVal() { |
|---|
| | | this.autoplay && this.start() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.autoplay && this.start() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // å¼å§æ»å¨ |
|---|
| | | start() { |
|---|
| | | this.localStartVal = this.startVal |
|---|
| | | this.startTime = null |
|---|
| | | this.localDuration = this.duration |
|---|
| | | this.paused = false |
|---|
| | | this.rAF = this.requestAnimationFrame(this.count) |
|---|
| | | }, |
|---|
| | | // éæ°å¼å§ |
|---|
| | | reStart() { |
|---|
| | | if (this.paused) { |
|---|
| | | this.resume() |
|---|
| | | this.paused = false |
|---|
| | | } else { |
|---|
| | | this.stop() |
|---|
| | | this.paused = true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // åæ¢ |
|---|
| | | stop() { |
|---|
| | | this.cancelAnimationFrame(this.rAF) |
|---|
| | | }, |
|---|
| | | // æ¢å¤ |
|---|
| | | resume() { |
|---|
| | | this.startTime = null |
|---|
| | | this.localDuration = this.remainingTime |
|---|
| | | this.localStartVal = this.printValue |
|---|
| | | this.requestAnimationFrame(this.count) |
|---|
| | | }, |
|---|
| | | // éç½® |
|---|
| | | reset() { |
|---|
| | | this.startTime = null |
|---|
| | | this.cnacelAnimationFrame(this.rAF) |
|---|
| | | this.displayValue = this.formatNumber(this.startVal) |
|---|
| | | }, |
|---|
| | | // éæ¯ç»ä»¶ |
|---|
| | | destroyed() { |
|---|
| | | this.cancelAnimationFrame(this.rAF) |
|---|
| | | }, |
|---|
| | | // ç´¯å æ¶é´ |
|---|
| | | count(timestamp) { |
|---|
| | | if (!this.startTime) this.startTime = timestamp |
|---|
| | | this.timestamp = timestamp |
|---|
| | | const progress = timestamp - this.startTime |
|---|
| | | this.remainingTime = this.localDuration - progress |
|---|
| | | if (this.useEasing) { |
|---|
| | | if (this.countDown) { |
|---|
| | | this.printValue = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration) |
|---|
| | | } { |
|---|
| | | this.printValue = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration) |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | if (this.countDown) { |
|---|
| | | this.printValue = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration) |
|---|
| | | } else { |
|---|
| | | this.printValue = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (this.countDown) { |
|---|
| | | this.printValue = this.printValue < this.endVal ? this.endVal : this.printValue |
|---|
| | | } else { |
|---|
| | | this.printValue = this.printValue > this.endVal ? this.endVal : this.printValue |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.displayValue = this.formatNumber(this.printValue) |
|---|
| | | if (progress < this.localDuration) { |
|---|
| | | this.rAF = this.requestAnimationFrame(this.count) |
|---|
| | | } else { |
|---|
| | | this.$emit('end') |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // ç¼å¨æ¶é´è®¡ç® |
|---|
| | | easingFn(t, b, c, d) { |
|---|
| | | return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b |
|---|
| | | }, |
|---|
| | | // 请æ±å¸§å¨ç» |
|---|
| | | requestAnimationFrame(cb) { |
|---|
| | | const currentTime = new Date().getTime() |
|---|
| | | // 为äºä½¿setTimteoutçå°½å¯è½çæ¥è¿æ¯ç§60帧çææ |
|---|
| | | const timeToCall = Math.max(0, 16 - (currentTime - this.lastTime)) |
|---|
| | | const timerId = setTimeout(() => { |
|---|
| | | cb && cb(currentTime + timeToCall) |
|---|
| | | }, timeToCall) |
|---|
| | | this.lastTime = currentTime + timeToCall |
|---|
| | | return timerId |
|---|
| | | }, |
|---|
| | | // æ¸
é¤å¸§å¨ç» |
|---|
| | | clearAnimationFrame(timerId) { |
|---|
| | | clearTimeout(timerId) |
|---|
| | | }, |
|---|
| | | // æ ¼å¼åæ°å¼ |
|---|
| | | formatNumber(number) { |
|---|
| | | const reg = /(\d+)(\d{3})/ |
|---|
| | | number = Number(number) |
|---|
| | | number = number.toFixed(Number(this.decimals)) |
|---|
| | | number += '' |
|---|
| | | const numberArray = number.split('.') |
|---|
| | | let num1 = numberArray[0] |
|---|
| | | const num2 = numberArray.length > 1 ? this.decimalSeparator + numberArray[1] : '' |
|---|
| | | |
|---|
| | | if (this.thousandthsSeparator && !this.isNumber(this.thousandthsSeparator)) { |
|---|
| | | while(reg.test(num1)) { |
|---|
| | | num1 = num1.replace(reg, '$1' + this.thousandthsSeparator + '$2') |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return num1 + num2 |
|---|
| | | }, |
|---|
| | | // å¤ææ¯å¦ä¸ºæ°å |
|---|
| | | isNumber(val) { |
|---|
| | | return !isNaN(parseFloat(val)) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | |
|---|
| | | .tn-count-num { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: inline-flex; |
|---|
| | | /* #endif */ |
|---|
| | | text-align: center; |
|---|
| | | line-height: 1; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | var cropper = { |
|---|
| | | // ç»å¸xè½´èµ·ç¹ |
|---|
| | | cutX: 0, |
|---|
| | | // ç»å¸yè½´èµ·ç¹ |
|---|
| | | cutY: 0, |
|---|
| | | // 触æ¸ç¹ä¿¡æ¯(ææä¸å¾çä¸å¿ç¹çç¸å¯¹ä½ç½®) |
|---|
| | | touchRelactive: [{ |
|---|
| | | x: 0, |
|---|
| | | y: 0 |
|---|
| | | }], |
|---|
| | | // åæ触æ¸æ¶æè¾¹çé¿åº¦ |
|---|
| | | hypotenuseLength:0, |
|---|
| | | // æ¯å¦ç»æè§¦æ¸ |
|---|
| | | touchEndFlag: false, |
|---|
| | | // ç»å¸å®½é« |
|---|
| | | canvasWidth: 0, |
|---|
| | | canvasHeight: 0, |
|---|
| | | // å¾çå®½é« |
|---|
| | | imgWidth: 0, |
|---|
| | | imgHeight: 0, |
|---|
| | | // å¾ç缩æ¾æ¯ä¾ |
|---|
| | | scale: 1, |
|---|
| | | // å¾çæ转è§åº¦ |
|---|
| | | angle: 0, |
|---|
| | | // å¾çä¸è¾¹è· |
|---|
| | | imgTop: 0, |
|---|
| | | // å¾çå·¦è¾¹è· |
|---|
| | | imgLeft: 0, |
|---|
| | | // çªå£å®½é« |
|---|
| | | windowWidth: 0, |
|---|
| | | windowHeight: 0, |
|---|
| | | init: true |
|---|
| | | } |
|---|
| | | |
|---|
| | | function bool(str) { |
|---|
| | | return str === 'true' || str === true |
|---|
| | | } |
|---|
| | | |
|---|
| | | function propsChange(prop, oldProp, ownerInstance, instance) { |
|---|
| | | if (prop && prop !== 'null') { |
|---|
| | | var params = prop.split(',') |
|---|
| | | var type = +params[0] |
|---|
| | | var dataset = instance.getDataset() |
|---|
| | | if (cropper.init || type == 4) { |
|---|
| | | cropper.canvasWidth = +dataset.width |
|---|
| | | cropper.canvasHeight = +dataset.height |
|---|
| | | cropper.imgTop = +dataset.windowheight / 2 |
|---|
| | | cropper.imgLeft = +dataset.windowwidth / 2 |
|---|
| | | cropper.imgWidth = +dataset.imgwidth |
|---|
| | | cropper.imgHeight = +dataset.imgheight |
|---|
| | | cropper.windowHeight = +dataset.windowheight |
|---|
| | | cropper.windowWidth = +dataset.windowwidth |
|---|
| | | cropper.init = false |
|---|
| | | } else if (type == 2 || type == 3) { |
|---|
| | | cropper.imgWidth = +dataset.imgwidth |
|---|
| | | cropper.imgHeight = +dataset.imgheight |
|---|
| | | } |
|---|
| | | cropper.angle = +dataset.angle |
|---|
| | | if (type == 3) { |
|---|
| | | imgTransform(ownerInstance) |
|---|
| | | } |
|---|
| | | switch(type) { |
|---|
| | | case 1: |
|---|
| | | setCutCenter(ownerInstance) |
|---|
| | | // 设置è£åªæ¡å¤§å° |
|---|
| | | computeCutSize(ownerInstance) |
|---|
| | | // æ£æ¥è£åªæ¡æ¯å¦å¨èå´å
|
|---|
| | | cutDetectionPosition(ownerInstance) |
|---|
| | | break |
|---|
| | | case 2: |
|---|
| | | setCutCenter(ownerInstance) |
|---|
| | | break |
|---|
| | | case 3: |
|---|
| | | imgMarginDetectionScale(ownerInstance) |
|---|
| | | break |
|---|
| | | case 4: |
|---|
| | | imageReset(ownerInstance) |
|---|
| | | break |
|---|
| | | case 5: |
|---|
| | | setCutCenter(ownerInstance) |
|---|
| | | break |
|---|
| | | default: |
|---|
| | | break |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | function touchStart(event, ownerInstance) { |
|---|
| | | var touch = event.touches || event.changedTouches |
|---|
| | | cropper.touchEndFlag = false |
|---|
| | | if (touch.length === 1) { |
|---|
| | | cropper.touchRelactive[0] = { |
|---|
| | | x: touch[0].pageX - cropper.imgLeft, |
|---|
| | | y: touch[0].pageY - cropper.imgTop |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | var width = Math.abs(touch[0].pageX - touch[1].pageX) |
|---|
| | | var height = Math.abs(touch[0].pageY - touch[1].pageY) |
|---|
| | | cropper.touchRelactive = [{ |
|---|
| | | x: touch[0].pageX - cropper.imgLeft, |
|---|
| | | y: touch[0].pageY - cropper.imgTop |
|---|
| | | },{ |
|---|
| | | x: touch[1].pageX - cropper.imgLeft, |
|---|
| | | y: touch[1].pageY - cropper.imgTop |
|---|
| | | }] |
|---|
| | | cropper.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | function touchMove(event, ownerInstance) { |
|---|
| | | var touch = event.touches || event.changedTouches |
|---|
| | | if (cropper.touchEndFlag) return |
|---|
| | | moveDuring(ownerInstance) |
|---|
| | | if (event.touches.length === 1) { |
|---|
| | | var left = touch[0].pageX - cropper.touchRelactive[0].x, |
|---|
| | | top = touch[0].pageY - cropper.touchRelactive[0].y; |
|---|
| | | cropper.imgLeft = left |
|---|
| | | cropper.imgTop = top |
|---|
| | | imgTransform(ownerInstance) |
|---|
| | | imgMarginDetectionPosition(ownerInstance) |
|---|
| | | } else { |
|---|
| | | var dataset = event.instance.getDataset() |
|---|
| | | var minScale = +dataset.minscale |
|---|
| | | var maxScale = +dataset.maxscale |
|---|
| | | var width = Math.abs(touch[0].pageX - touch[1].pageX), |
|---|
| | | height = Math.abs(touch[0].pageY - touch[1].pageY), |
|---|
| | | hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)), |
|---|
| | | scale = cropper.scale * (hypotenuse / cropper.hypotenuseLength), |
|---|
| | | current_deg = 0; |
|---|
| | | scale = scale <= minScale ? minScale : scale |
|---|
| | | scale = scale >= maxScale ? maxScale : scale |
|---|
| | | cropper.scale = scale |
|---|
| | | imgMarginDetectionScale(ownerInstance, true) |
|---|
| | | var touchRelative = [{ |
|---|
| | | x: touch[0].pageX - cropper.imgLeft, |
|---|
| | | y: touch[0].pageY - cropper.imgTop |
|---|
| | | }, { |
|---|
| | | x: touch[1].pageX - cropper.imgLeft, |
|---|
| | | y: touch[1].pageY - cropper.imgTop |
|---|
| | | }] |
|---|
| | | cropper.touchRelactive = touchRelative |
|---|
| | | cropper.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) |
|---|
| | | // æ´æ°è§å¾ |
|---|
| | | cropper.angle = cropper.angle + current_deg |
|---|
| | | imgTransform(ownerInstance) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | function touchEnd(event, ownerInstance) { |
|---|
| | | cropper.touchEndFlag = true |
|---|
| | | moveStop(ownerInstance) |
|---|
| | | updateData(ownerInstance) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function moveDuring(ownerInstance) { |
|---|
| | | if (!ownerInstance) return |
|---|
| | | ownerInstance.callMethod('moveDuring') |
|---|
| | | } |
|---|
| | | |
|---|
| | | function moveStop(ownerInstance) { |
|---|
| | | if (!ownerInstance) return |
|---|
| | | ownerInstance.callMethod('moveStop') |
|---|
| | | } |
|---|
| | | |
|---|
| | | function setCutCenter(ownerInstance) { |
|---|
| | | var cutX = (cropper.windowWidth - cropper.canvasWidth) * 0.5 |
|---|
| | | var cutY = (cropper.windowHeight - cropper.canvasHeight) * 0.5 |
|---|
| | | |
|---|
| | | cropper.imgTop = cropper.imgTop - cropper.cutY + cutY |
|---|
| | | cropper.cutY = cutY |
|---|
| | | cropper.imgLeft = cropper.imgLeft - cropper.cutX + cutX |
|---|
| | | cropper.cutX = cutX |
|---|
| | | cutDetectionPosition(ownerInstance) |
|---|
| | | imgTransform(ownerInstance) |
|---|
| | | updateData(ownerInstance) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ£æµåªè£æ¡ä½ç½®æ¯å¦å¨å
许çèå´å
ï¼å±å¹å
ï¼ |
|---|
| | | function cutDetectionPosition(ownerInstance) { |
|---|
| | | var windowHeight = cropper.windowHeight, |
|---|
| | | windowWidth = cropper.windowWidth; |
|---|
| | | |
|---|
| | | // æ£æµä¸è¾¹è·æ¯å¦å¨èå´å
|
|---|
| | | var cutDetectionPositionTop = function() { |
|---|
| | | if (cropper.cutY < 0) { |
|---|
| | | cropper.cutY = 0 |
|---|
| | | } |
|---|
| | | if (cropper.cutY > windowHeight - cropper.canvasHeight) { |
|---|
| | | cropper.cutY = windowHeight - cropper.canvasHeight |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ£æµå·¦è¾¹è·æ¯å¦å¨èå´å
|
|---|
| | | var cutDetectionPositionLeft = function() { |
|---|
| | | if (cropper.cutX < 0) { |
|---|
| | | cropper.cutX = 0 |
|---|
| | | } |
|---|
| | | if (cropper.cutX > windowWidth - cropper.canvasWidth) { |
|---|
| | | cropper.cutX = windowWidth - cropper.canvasWidth |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // è£åªæ¡åæ å¤çï¼å¦æåªåä¸ä¸ªåæ°åå¦ä¸ä¸ªé»è®¤ä¸º0ï¼é½ä¸åé»è®¤ä¸ºå±
ä¸ï¼ |
|---|
| | | if (cropper.cutX === null && cropper.cutY === null) { |
|---|
| | | var cutX = (windowWidth - cropper.canvasWidth) * 0.5, |
|---|
| | | cutY = (windowHeight - cropper.canvasHeight) * 0.5; |
|---|
| | | cropper.cutX = cutX |
|---|
| | | cropper.cutY = cutY |
|---|
| | | } else if (cropper.cutX !== null && cropper.cutX !== null) { |
|---|
| | | cutDetectionPositionTop() |
|---|
| | | cutDetectionPositionLeft() |
|---|
| | | } else if (cropper.cutX !== null && cropper.cutY === null) { |
|---|
| | | cutDetectionPositionLeft() |
|---|
| | | cropper.cutY = (windowHeight - cropper.canvasHeight) / 2 |
|---|
| | | } else if (cropper.cutX === null && cropper.cutY !== null) { |
|---|
| | | cutDetectionPositionTop() |
|---|
| | | cropper.cutX = (windowWidth - cropper.canvasWidth) / 2 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¾çè¾¹ç¼æ£æµ-ç¼©æ¾ |
|---|
| | | function imgMarginDetectionScale(ownerInstance, delay) { |
|---|
| | | var scale = cropper.scale, |
|---|
| | | imgWidth = cropper.imgWidth, |
|---|
| | | imgHeight = cropper.imgHeight; |
|---|
| | | if ((cropper.angle / 90) % 2) { |
|---|
| | | imgWidth = cropper.imgHeight |
|---|
| | | imgHeight = cropper.imgWidth |
|---|
| | | } |
|---|
| | | if (imgWidth * scale < cropper.canvasWidth) { |
|---|
| | | scale = cropper.canvasWidth / imgWidth |
|---|
| | | } |
|---|
| | | if (imgHeight * scale < cropper.canvasHeight) { |
|---|
| | | scale = Math.max(scale, cropper.canvasHeight / imgHeight) |
|---|
| | | } |
|---|
| | | imgMarginDetectionPosition(ownerInstance, scale, delay) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¾çè¾¹ç¼æ£æµ-ä½ç½® |
|---|
| | | function imgMarginDetectionPosition(ownerInstance, scale, delay) { |
|---|
| | | var left = cropper.imgLeft, |
|---|
| | | top = cropper.imgTop, |
|---|
| | | imgWidth = cropper.imgWidth, |
|---|
| | | imgHeight = cropper.imgHeight; |
|---|
| | | scale = scale || cropper.scale |
|---|
| | | if ((cropper.angle / 90) % 2) { |
|---|
| | | imgWidth = cropper.imgHeight |
|---|
| | | imgHeight = cropper.imgWidth |
|---|
| | | } |
|---|
| | | |
|---|
| | | left = cropper.cutX + (imgWidth * scale) / 2 >= left ? left : cropper.cutX + (imgWidth * scale) / 2 |
|---|
| | | left = cropper.cutX + cropper.canvasWidth - (imgWidth * scale) / 2 <= left ? left : cropper.cutX + cropper.canvasWidth - (imgWidth * scale) / 2 |
|---|
| | | top = cropper.cutY + (imgHeight * scale) / 2 >= top ? top : cropper.cutY + (imgHeight * scale) / 2 |
|---|
| | | top = cropper.cutY + cropper.canvasHeight - (imgHeight * scale) / 2 <= top ? top : cropper.cutY + cropper.canvasHeight - (imgHeight * scale) / 2 |
|---|
| | | |
|---|
| | | cropper.imgLeft = left |
|---|
| | | cropper.imgTop = top |
|---|
| | | cropper.scale = scale |
|---|
| | | if (!delay || delay === 'null') { |
|---|
| | | imgTransform(ownerInstance) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ¹åæªåå¼å¤§å° |
|---|
| | | function computeCutSize(ownerInstance) { |
|---|
| | | if (cropper.canvasWidth > cropper.windowWidth) { |
|---|
| | | cropper.canvasWidth = cropper.windowWidth |
|---|
| | | } else if (cropper.canvasWidth + cropper.cutX > cropper.windowWidth) { |
|---|
| | | cropper.cutX = cropper.windowWidth - cropper.cutX |
|---|
| | | } |
|---|
| | | if (cropper.canvasHeight > cropper.windowHeight) { |
|---|
| | | cropper.canvasHeight = cropper.windowHeight |
|---|
| | | } else if (cropper.canvasHeight + cropper.cutY > cropper.windowHeight) { |
|---|
| | | cropper.cutY = cropper.windowHeight - cropper.cutY |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¾çå¨ç» |
|---|
| | | function imgTransform(ownerInstance) { |
|---|
| | | var image = ownerInstance.selectComponent('.tn-cropper__image') |
|---|
| | | if (!image) return |
|---|
| | | var x = cropper.imgLeft - cropper.imgWidth / 2, |
|---|
| | | y = cropper.imgTop - cropper.imgHeight / 2; |
|---|
| | | image.setStyle({ |
|---|
| | | 'transform': 'translate3d('+ x + 'px,' + y + 'px,0) scale(' + cropper.scale +') rotate(' + cropper.angle + 'deg)' |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¾çéç½® |
|---|
| | | function imageReset(ownerInstance) { |
|---|
| | | cropper.scale = 1 |
|---|
| | | cropper.angle = 0 |
|---|
| | | imgTransform(ownerInstance) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // é«åº¦åå |
|---|
| | | function canvasHeight(ownerInstance) { |
|---|
| | | if (!ownerInstance) return |
|---|
| | | computeCutSize(ownerInstance) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 宽度åå |
|---|
| | | function canvasWidth(ownerInstance) { |
|---|
| | | if (!ownerInstance) return |
|---|
| | | computeCutSize(ownerInstance) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ´æ°æ°æ® |
|---|
| | | function updateData(ownerInstance) { |
|---|
| | | if (!ownerInstance) return |
|---|
| | | ownerInstance.callMethod('change', { |
|---|
| | | cutX: cropper.cutX, |
|---|
| | | cutY: cropper.cutY, |
|---|
| | | imgWidth: cropper.imgWidth, |
|---|
| | | imgHeight: cropper.imgHeight, |
|---|
| | | scale: cropper.scale, |
|---|
| | | angle: cropper.angle, |
|---|
| | | imgTop: cropper.imgTop, |
|---|
| | | imgLeft: cropper.imgLeft |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | module.exports = { |
|---|
| | | touchStart: touchStart, |
|---|
| | | touchMove: touchMove, |
|---|
| | | touchEnd: touchEnd, |
|---|
| | | propsChange: propsChange |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="tn-cropper-class tn-cropper" @touchmove.stop.prevent="stop"> |
|---|
| | | <image |
|---|
| | | v-if="imageUrl" |
|---|
| | | :src="imageUrl" |
|---|
| | | class="tn-cropper__image" |
|---|
| | | :style="{ |
|---|
| | | width: (imgWidth ? imgWidth : width) + 'px', |
|---|
| | | height: (imgHeight ? imgHeight : height) + 'px', |
|---|
| | | transitionDuration: (animation ? 0.3 : 0) + 's' |
|---|
| | | }" |
|---|
| | | mode="widthFix" |
|---|
| | | :data-minScale="minScale" |
|---|
| | | :data-maxScale="maxScale" |
|---|
| | | @load="imageLoad" |
|---|
| | | @error="imageLoad" |
|---|
| | | @touchstart="wxs.touchStart" |
|---|
| | | @touchmove="wxs.touchMove" |
|---|
| | | @touchend="wxs.touchEnd" |
|---|
| | | ></image> |
|---|
| | | |
|---|
| | | <view |
|---|
| | | class="tn-cropper__wrapper" |
|---|
| | | :style="{ |
|---|
| | | width: width + 'px', |
|---|
| | | height: height + 'px', |
|---|
| | | borderRadius: isRound ? '50%' : '0' |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="tn-cropper__border" |
|---|
| | | :style="{ |
|---|
| | | border: borderStyle, |
|---|
| | | borderRadius: isRound ? '50%' : '0', |
|---|
| | | }" |
|---|
| | | :prop="props" |
|---|
| | | :change:prop="wxs.propsChange" |
|---|
| | | :data-width="width" |
|---|
| | | :data-height="height" |
|---|
| | | :data-windowHeight="systemInfo.windowHeight || 600" |
|---|
| | | :data-windowWidth="systemInfo.windowWidth || 400" |
|---|
| | | :data-imgTop="imgTop" |
|---|
| | | :data-imgWidth="imgWidth" |
|---|
| | | :data-imgHeight="imgHeight" |
|---|
| | | :data-angle="angle" |
|---|
| | | ></view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <canvas |
|---|
| | | class="tn-cropper__canvas" |
|---|
| | | :style="{ |
|---|
| | | width: width * scaleRatio + 'px', |
|---|
| | | height: height * scaleRatio + 'px' |
|---|
| | | }" |
|---|
| | | :canvas-id="CANVAS_ID" |
|---|
| | | :id="CANVAS_ID" |
|---|
| | | :disable-scroll="true" |
|---|
| | | ></canvas> |
|---|
| | | |
|---|
| | | <view |
|---|
| | | v-if="!custom" |
|---|
| | | class="tn-cropper__tabbar" |
|---|
| | | > |
|---|
| | | <view class="tn-cropper__tabbar__btn tn-cropper__tabber__cancel" @tap.stop="back">åæ¶</view> |
|---|
| | | <view class="tn-cropper__tabbar__rotate" :class="[`tn-icon-${rotateIcon}`]" @tap.stop="setAngle"></view> |
|---|
| | | <view class="tn-cropper__tabbar__btn tn-cropper__tabber__confirm" @tap.stop="getCutImage">å®æ</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script src="./index.wxs" lang="wxs" module="wxs"></script> |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'tn-cropper', |
|---|
| | | props: { |
|---|
| | | // å¾çè·¯å¾ |
|---|
| | | imageUrl: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // è£åªæ¡é«åº¦ px |
|---|
| | | height: { |
|---|
| | | type: Number, |
|---|
| | | default: 280 |
|---|
| | | }, |
|---|
| | | // è£åªæ¡ç宽度 px |
|---|
| | | width: { |
|---|
| | | type: Number, |
|---|
| | | default: 280 |
|---|
| | | }, |
|---|
| | | // æ¯å¦ä¸ºåå½¢è£åªæ¡ |
|---|
| | | isRound: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // è£åªæ¡è¾¹æ¡æ ·å¼ |
|---|
| | | borderStyle: { |
|---|
| | | type: String, |
|---|
| | | default: '1rpx solid #FFF' |
|---|
| | | }, |
|---|
| | | // çæçå¾ç尺寸ç¸å¯¹äºè£åªæ¡çæ¯ä¾ |
|---|
| | | scaleRatio: { |
|---|
| | | type: Number, |
|---|
| | | default: 1 |
|---|
| | | }, |
|---|
| | | // è£åªåçå¾çè´¨é |
|---|
| | | // åå¼èå´ä¸ºï¼(0, 1] |
|---|
| | | quality: { |
|---|
| | | type: Number, |
|---|
| | | default: 0.8 |
|---|
| | | }, |
|---|
| | | // æ¯å¦è¿åbase64(H5é»è®¤ä¸ºbase64) |
|---|
| | | returnBase64: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // å¾çæ转è§åº¦ |
|---|
| | | rotateAngle: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // å¾çæå°ç¼©æ¾æ¯ |
|---|
| | | minScale: { |
|---|
| | | type: Number, |
|---|
| | | default: 0.5 |
|---|
| | | }, |
|---|
| | | // å¾çæ大缩æ¾æ¯ |
|---|
| | | maxScale: { |
|---|
| | | type: Number, |
|---|
| | | default: 2 |
|---|
| | | }, |
|---|
| | | // èªå®ä¹æä½æ (设置åä¼éèé»è®¤çåºé¨æä½æ ) |
|---|
| | | custom: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // æ¯å¦å¨å¼åçæ¹åçæ¶åå¼å§è£åª |
|---|
| | | // custom为trueæ¶çæ |
|---|
| | | startCutting: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // è£åªæ¶æ¯å¦æ¾ç¤ºloading |
|---|
| | | loading: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ转å¾çå¾æ |
|---|
| | | rotateIcon: { |
|---|
| | | type: String, |
|---|
| | | default: 'circle-arrow' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // canvas容å¨id |
|---|
| | | CANVAS_ID: 'tn-cropper-canvas', |
|---|
| | | // 移å¨è£åªè¶
æ¶æ¶é´å®æ¶å¨ |
|---|
| | | TIME_CUT_CENTER: null, |
|---|
| | | // canvaså®¹å¨ |
|---|
| | | ctx: null, |
|---|
| | | // ç»å¸xè½´èµ·ç¹ |
|---|
| | | cutX: 0, |
|---|
| | | // ç»å¸yè½´èµ·ç¹ |
|---|
| | | cutY: 0, |
|---|
| | | // å¾ç宽度 |
|---|
| | | imgWidth: 0, |
|---|
| | | // å¾çé«åº¦ |
|---|
| | | imgHeight: 0, |
|---|
| | | // å¾çåºé¨ä½ç½® |
|---|
| | | imgTop: 0, |
|---|
| | | // å¾ç左边ä½ç½® |
|---|
| | | imgLeft: 0, |
|---|
| | | // å¾ç缩æ¾æ¯ |
|---|
| | | scale: 1, |
|---|
| | | // å¾çæ转è§åº¦ |
|---|
| | | angle: 0, |
|---|
| | | // å¼å¯å¨ç»è¿æ¸¡ææ |
|---|
| | | animation: false, |
|---|
| | | // å¨ç»å®æ¶å¨ |
|---|
| | | animationTime: null, |
|---|
| | | // ç³»ç»ä¿¡æ¯ |
|---|
| | | systemInfo: {}, |
|---|
| | | // ä¼ éçåæ° |
|---|
| | | props: '', |
|---|
| | | // æ è®°æ¯å¦åçæ¹å |
|---|
| | | sizeChange: 0, |
|---|
| | | angleChange: 0, |
|---|
| | | resetChange: 0, |
|---|
| | | centerChange: 0 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | imageUrl(val) { |
|---|
| | | this.imageReset() |
|---|
| | | this.showLoading() |
|---|
| | | uni.getImageInfo({ |
|---|
| | | src: val, |
|---|
| | | success: (res) => { |
|---|
| | | // 计ç®å¾ç尺寸 |
|---|
| | | this.imgComputeSize(res.width, res.height) |
|---|
| | | this.angleChange++ |
|---|
| | | this.props = `3,${this.angleChange}` |
|---|
| | | }, |
|---|
| | | fail: (err) => { |
|---|
| | | console.log(err); |
|---|
| | | this.imgComputeSize() |
|---|
| | | this.angleChange++ |
|---|
| | | this.props = `3,${this.angleChange}` |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | rotateAngle(val) { |
|---|
| | | this.animation = true |
|---|
| | | this.angle = val |
|---|
| | | this.angleChanged(val) |
|---|
| | | }, |
|---|
| | | animation(val) { |
|---|
| | | clearTimeout(this.animationTime) |
|---|
| | | if (val) { |
|---|
| | | this.animationTime = setTimeout(() => { |
|---|
| | | this.animation = false |
|---|
| | | }, 200) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | startCutting(val) { |
|---|
| | | if (this.custom && val) { |
|---|
| | | this.getCutImage() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.systemInfo = uni.getSystemInfoSync() |
|---|
| | | this.imgTop = this.systemInfo.windowHeight / 2 |
|---|
| | | this.imgLeft = this.systemInfo.windowWidth / 2 |
|---|
| | | this.ctx = uni.createCanvasContext(this.CANVAS_ID, this) |
|---|
| | | // åå§å |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.props = '1,1' |
|---|
| | | }) |
|---|
| | | setTimeout(() => { |
|---|
| | | this.$emit('ready', {}) |
|---|
| | | }, 200) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // å°ç½ç»å¾ç转æ¢ä¸ºæ¬å°å¾çãåæ¥æ§è¡ã |
|---|
| | | async getLocalImage(url) { |
|---|
| | | return await new Promise((resolve, reject) => { |
|---|
| | | uni.downloadFile({ |
|---|
| | | url: url, |
|---|
| | | success: (res) => { |
|---|
| | | resolve(res.tempFilePath) |
|---|
| | | }, |
|---|
| | | fail: (err) => { |
|---|
| | | reject(false) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // è¿åè£åªåçå¾çä¿¡æ¯ |
|---|
| | | getCutImage() { |
|---|
| | | if (!this.imageUrl) { |
|---|
| | | uni.showToast({ |
|---|
| | | title: '请éæ©å¾ç', |
|---|
| | | icon: 'none' |
|---|
| | | }) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.loading && this.showLoading() |
|---|
| | | const draw = async () => { |
|---|
| | | // å¾çå®é
å¤§å° |
|---|
| | | let imgWidth = this.imgWidth * this.scale * this.scaleRatio |
|---|
| | | let imgHeight = this.imgHeight * this.scale * this.scaleRatio |
|---|
| | | // canvasåå¾ççç¸å¯¹è·ç¦» |
|---|
| | | let xpos = this.imgLeft - this.cutX |
|---|
| | | let ypos = this.imgTop - this.cutY |
|---|
| | | |
|---|
| | | |
|---|
| | | let imgUrl = this.imageUrl |
|---|
| | | // #ifdef APP-PLUS || MP-WEIXIN |
|---|
| | | if (~this.imageUrl.indexOf('https:')) { |
|---|
| | | imgUrl = await this.getLocalImage(this.imageUrl) |
|---|
| | | } |
|---|
| | | // #endif |
|---|
| | | // æ转ç»å¸ |
|---|
| | | this.ctx.translate(xpos * this.scaleRatio, ypos * this.scaleRatio) |
|---|
| | | // å¦ææ¶åå½¢åæªååå½¢ |
|---|
| | | if (this.isRound) { |
|---|
| | | const r = this.width > this.height ? Math.floor(this.height / 2) : Math.floor(this.width / 2) |
|---|
| | | let translateX = Math.floor(this.width / 2) |
|---|
| | | let translateY = Math.floor(this.height / 2) |
|---|
| | | this.ctx.beginPath() |
|---|
| | | this.ctx.arc(translateX - (xpos * this.scaleRatio), translateY - (ypos * this.scaleRatio), r, 0, (360 * Math.PI) / 180) |
|---|
| | | this.ctx.closePath() |
|---|
| | | this.ctx.stroke() |
|---|
| | | this.ctx.clip() |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.ctx.rotate((this.angle * Math.PI) / 180) |
|---|
| | | this.ctx.drawImage(imgUrl, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight) |
|---|
| | | |
|---|
| | | // æ¸
空åå继ç»ç»å¶ |
|---|
| | | this.ctx.draw(false, () => { |
|---|
| | | let params = { |
|---|
| | | width: this.width * this.scaleRatio, |
|---|
| | | height: Math.round(this.height * this.scaleRatio), |
|---|
| | | destWidth: this.width * this.scaleRatio, |
|---|
| | | destHeight: Math.round(this.height) * this.scaleRatio, |
|---|
| | | fileType: 'png', |
|---|
| | | quality: this.quality |
|---|
| | | } |
|---|
| | | let data = { |
|---|
| | | url: '', |
|---|
| | | base64: '', |
|---|
| | | width: this.width * this.scaleRatio, |
|---|
| | | height: this.height * this.scaleRatio |
|---|
| | | } |
|---|
| | | |
|---|
| | | // #ifdef MP-ALIPAY |
|---|
| | | if (this.returnBase64) { |
|---|
| | | this.ctx.toDataURL(params).then((urlData) => { |
|---|
| | | data.base64 = urlData |
|---|
| | | this.loading && uni.hideLoading() |
|---|
| | | this.$emit('cropper', data) |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | this.ctx.toTempFilePath({ |
|---|
| | | ...params, |
|---|
| | | success: (res) => { |
|---|
| | | data.url = res.apFilePath |
|---|
| | | this.loading && uni.hideLoading() |
|---|
| | | this.$emit('cropper', data) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | let base64Flag = this.returnBase64 |
|---|
| | | // #ifndef MP-ALIPAY |
|---|
| | | // #ifdef MP-BAIDU || MP-TOUTIAO || H5 |
|---|
| | | base64Flag = false |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | if (base64Flag) { |
|---|
| | | uni.canvasGetImageData({ |
|---|
| | | canvasId: this.CANVAS_ID, |
|---|
| | | x: 0, |
|---|
| | | y: 0, |
|---|
| | | width: this.width * this.scaleRatio, |
|---|
| | | height: Math.round(this.height * this.scaleRatio), |
|---|
| | | success: (res) => { |
|---|
| | | const arrayBuffer = new Uint8Array(res.data) |
|---|
| | | const base64 = uni.arrayBufferToBase64(arrayBuffer) |
|---|
| | | data.base64 = base64 |
|---|
| | | this.loading && uni.hideLoading() |
|---|
| | | this.$emit('cropper', data) |
|---|
| | | } |
|---|
| | | }, this) |
|---|
| | | } else { |
|---|
| | | uni.canvasToTempFilePath({ |
|---|
| | | ...params, |
|---|
| | | canvasId: this.CANVAS_ID, |
|---|
| | | success: (res) => { |
|---|
| | | data.url = res.tempFilePath |
|---|
| | | // #ifdef H5 |
|---|
| | | data.base64 = res.tempFilePath |
|---|
| | | // #endif |
|---|
| | | this.loading && uni.hideLoading() |
|---|
| | | this.$emit('cropper', data) |
|---|
| | | } |
|---|
| | | }, this) |
|---|
| | | } |
|---|
| | | // #endif |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | draw() |
|---|
| | | }, |
|---|
| | | // ä¿®æ¹å¾çå触åçå½æ° |
|---|
| | | change(e) { |
|---|
| | | this.cutX = e.cutX || 0 |
|---|
| | | this.cutY = e.cutY || 0 |
|---|
| | | this.imgWidth = e.imgWidth || this.imgWidth |
|---|
| | | this.imgHeight = e.imgHeight || this.imgHeight |
|---|
| | | this.scale = e.scale || 1 |
|---|
| | | this.angle = e.angle || 0 |
|---|
| | | this.imgTop = e.imgTop || 0 |
|---|
| | | this.imgLeft = e.imgLeft || 0 |
|---|
| | | }, |
|---|
| | | // éç½®å¾ç |
|---|
| | | imageReset() { |
|---|
| | | this.scale = 1 |
|---|
| | | this.angle = 0 |
|---|
| | | let systemInfo = this.systemInfo.windowHeight ? this.systemInfo : uni.getSystemInfoSync() |
|---|
| | | this.imgTop = systemInfo.windowHeight / 2 |
|---|
| | | this.imgLeft = systemInfo.windowWidth / 2 |
|---|
| | | this.resetChange++ |
|---|
| | | this.props = `4,${this.resetChange}` |
|---|
| | | // åå§æ转è§åº¦ |
|---|
| | | this.$emit('initAngle', {}) |
|---|
| | | }, |
|---|
| | | // å¾çççæç尺寸 |
|---|
| | | imgComputeSize(width, height) { |
|---|
| | | // é»è®¤æå¾ççæå°è¾¹ = 对åºçè£åªæ¡å°ºå¯¸ |
|---|
| | | let imgWidth = width, |
|---|
| | | imgHeight = height; |
|---|
| | | if (imgWidth && imgHeight) { |
|---|
| | | if (imgWidth / imgHeight > this.width / this.height) { |
|---|
| | | imgHeight = this.height |
|---|
| | | imgWidth = (width / height) * imgHeight |
|---|
| | | } else { |
|---|
| | | imgWidth = this.width |
|---|
| | | imgHeight = (height / width) * imgWidth |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | let systemInfo = this.systemInfo.windowHeight ? this.systemInfo : uni.getSystemInfoSync() |
|---|
| | | imgWidth = systemInfo.windowWidth |
|---|
| | | imgHeight = 0 |
|---|
| | | } |
|---|
| | | this.imgWidth = imgWidth |
|---|
| | | this.imgHeight = imgHeight |
|---|
| | | this.sizeChange++ |
|---|
| | | this.props = `2,${this.sizeChange}` |
|---|
| | | }, |
|---|
| | | // å¾çå è½½å®æ¯ |
|---|
| | | imageLoad(e) { |
|---|
| | | this.imageReset() |
|---|
| | | uni.hideLoading() |
|---|
| | | this.$emit('imageLoad', {}) |
|---|
| | | }, |
|---|
| | | // 移å¨ç»æ |
|---|
| | | moveStop() { |
|---|
| | | clearTimeout(this.TIME_CUT_CENTER) |
|---|
| | | this.TIME_CUT_CENTER = setTimeout(() => { |
|---|
| | | this.centerChange++ |
|---|
| | | this.props = `5,${this.centerChange}` |
|---|
| | | }, 688) |
|---|
| | | }, |
|---|
| | | // 移å¨ä¸ |
|---|
| | | moveDuring() { |
|---|
| | | clearTimeout(this.TIME_CUT_CENTER) |
|---|
| | | }, |
|---|
| | | // æ¾ç¤ºå è½½æ¡ |
|---|
| | | showLoading() { |
|---|
| | | uni.showLoading({ |
|---|
| | | title: '请ç¨ç......', |
|---|
| | | mask: true |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // åæ¢ |
|---|
| | | stop() {}, |
|---|
| | | // åæ¶/è¿å |
|---|
| | | back() { |
|---|
| | | uni.navigateBack() |
|---|
| | | }, |
|---|
| | | // è§åº¦æ¹å |
|---|
| | | angleChanged(val) { |
|---|
| | | this.moveStop() |
|---|
| | | if (val % 90) { |
|---|
| | | this.angle = Math.round(val / 90) * 90 |
|---|
| | | } |
|---|
| | | this.angleChange++ |
|---|
| | | this.props = `3,${this.angleChange}` |
|---|
| | | }, |
|---|
| | | // 设置è§åº¦ |
|---|
| | | setAngle() { |
|---|
| | | this.animation = true |
|---|
| | | this.angle = this.angle + 90 |
|---|
| | | this.angleChanged(this.angle) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | |
|---|
| | | .tn-cropper { |
|---|
| | | width: 100vw; |
|---|
| | | height: 100vh; |
|---|
| | | background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4); |
|---|
| | | // background: linear-gradient(-120deg, #9A5CE5, #01BEFF, #00F5D4, #43e97b); |
|---|
| | | // background: linear-gradient(-120deg,#c471f5, #ec008c, #ff4e50,#f9d423); |
|---|
| | | // background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a); |
|---|
| | | position: fixed; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | z-index: 1; |
|---|
| | | |
|---|
| | | &__image { |
|---|
| | | width: 100%; |
|---|
| | | border-style: none; |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | z-index: 2; |
|---|
| | | -webkit-backface-visibility: hidden; |
|---|
| | | backface-visibility: hidden; |
|---|
| | | transform-origin: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__canvas { |
|---|
| | | position: fixed; |
|---|
| | | z-index: 10; |
|---|
| | | left: -2000px; |
|---|
| | | top: -2000px; |
|---|
| | | pointer-events: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__wrapper { |
|---|
| | | position: fixed; |
|---|
| | | z-index: 4; |
|---|
| | | left: 50%; |
|---|
| | | top: 50%; |
|---|
| | | transform: translate(-50%, -50%); |
|---|
| | | border: 3000px solid rgba(0, 0, 0, 0.55); |
|---|
| | | pointer-events: none; |
|---|
| | | box-sizing: content-box; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__border { |
|---|
| | | position: absolute; |
|---|
| | | left: 0; |
|---|
| | | top: 0; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | box-sizing: border-box; |
|---|
| | | pointer-events: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__tabbar { |
|---|
| | | width: 100%; |
|---|
| | | height: 120rpx; |
|---|
| | | padding: 0 40rpx; |
|---|
| | | box-sizing: border-box; |
|---|
| | | position: fixed; |
|---|
| | | left: 0; |
|---|
| | | bottom: 0; |
|---|
| | | z-index: 99; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | color: #FFFFFF; |
|---|
| | | font-size: 32rpx; |
|---|
| | | |
|---|
| | | &::after { |
|---|
| | | content: ''; |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | right: 0; |
|---|
| | | left: 0; |
|---|
| | | border-top: 1rpx solid rgba(255, 255, 255, 0.2); |
|---|
| | | -webkit-transform: scaleY(0.5) translateZ(0); |
|---|
| | | transform: scaleY(0.5) translateZ(0); |
|---|
| | | transform-origin: 0 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__btn { |
|---|
| | | height: 80rpx; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__rotate { |
|---|
| | | width: 44rpx; |
|---|
| | | height: 44rpx; |
|---|
| | | font-size: 40rpx; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | |
|---|
| | | function setTimeout(instance, cb, time) { |
|---|
| | | if (time > 0) { |
|---|
| | | var s = getDate().getTime() |
|---|
| | | var fn = function () { |
|---|
| | | if (getDate().getTime() - s > time) { |
|---|
| | | cb && cb() |
|---|
| | | } else |
|---|
| | | instance.requestAnimationFrame(fn) |
|---|
| | | } |
|---|
| | | fn() |
|---|
| | | } |
|---|
| | | else |
|---|
| | | cb && cb() |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¤æ触æ¸ç移å¨æ¹å |
|---|
| | | function decideSwiperDirection(startTouches, currentTouches, vertical) { |
|---|
| | | // éå¨å移容差 |
|---|
| | | var toleranceShake = 150 |
|---|
| | | // 移å¨å®¹å·® |
|---|
| | | var toleranceTranslate = 10 |
|---|
| | | |
|---|
| | | if (!vertical) { |
|---|
| | | // æ°´å¹³æ¹åç§»å¨ |
|---|
| | | if (Math.abs(currentTouches.y - startTouches.y) <= toleranceShake) { |
|---|
| | | // console.log(currentTouches.x, startTouches.x); |
|---|
| | | if (Math.abs(currentTouches.x - startTouches.x) > toleranceTranslate) { |
|---|
| | | if (currentTouches.x - startTouches.x > 0) { |
|---|
| | | return 'right' |
|---|
| | | } else if (currentTouches.x - startTouches.x < 0) { |
|---|
| | | return 'left' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | // åç´æ¹åç§»å¨ |
|---|
| | | if (Math.abs(currentTouches.x - startTouches.x) <= toleranceShake) { |
|---|
| | | // console.log(currentTouches.x, startTouches.x); |
|---|
| | | if (Math.abs(currentTouches.y - startTouches.y) > toleranceTranslate) { |
|---|
| | | if (currentTouches.y - startTouches.y > 0) { |
|---|
| | | return 'down' |
|---|
| | | } else if (currentTouches.y - startTouches.y < 0) { |
|---|
| | | return 'up' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return '' |
|---|
| | | } |
|---|
| | | |
|---|
| | | // swiperItemåæ°æ°æ®æ´æ° |
|---|
| | | var itemDataObserver = function(newVal, oldVal, ownerInstance, instance) { |
|---|
| | | if (!newVal || newVal === 'undefined') return |
|---|
| | | var state = ownerInstance.getState() |
|---|
| | | state.itemData = newVal |
|---|
| | | } |
|---|
| | | |
|---|
| | | // swiperIndexæ°æ®æ´æ° |
|---|
| | | var currentIndexObserver = function(newVal, oldVal, ownerInstance, instance) { |
|---|
| | | if ((!newVal && newVal != 0) || newVal === 'undefined') return |
|---|
| | | var state = ownerInstance.getState() |
|---|
| | | state.currentIndex = newVal |
|---|
| | | } |
|---|
| | | |
|---|
| | | // containerDataæ°æ®æ´æ° |
|---|
| | | var containerDataObserver = function(newVal, oldVal, ownerInstance, instance) { |
|---|
| | | if (!newVal || newVal === 'undefined') return |
|---|
| | | var state = ownerInstance.getState() |
|---|
| | | state.containerData = newVal |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¼å§è§¦æ¸ |
|---|
| | | var touchStart = function(event, ownerInstance) { |
|---|
| | | console.log('touchStart'); |
|---|
| | | var instance = event.instance |
|---|
| | | var dataset = instance.getDataset() |
|---|
| | | var state = ownerInstance.getState() |
|---|
| | | var itemData = state.itemData |
|---|
| | | var containerData = state.containerData |
|---|
| | | |
|---|
| | | // ç±äºå½åSwiperIndexåå§ä¸º0ï¼å¯è½ä¼å¯¼è´swiperIndexæ°æ®æ²¡ææ´æ° |
|---|
| | | if (!state.currentIndex || state.currentIndex === 'undefined') { |
|---|
| | | state.currentIndex = 0 |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (!containerData || containerData.circular === 'undefined') { |
|---|
| | | containerData.circular = false |
|---|
| | | } |
|---|
| | | state.containerData = containerData |
|---|
| | | |
|---|
| | | // å¦æå½ååæ¢å¨ç»è¿æ²¡æ§è¡ç»æï¼å次触æ¸ä¼éæ°å 载对åºçswiperContainerçä¿¡æ¯ |
|---|
| | | // console.log(containerData.animationFinish); |
|---|
| | | if (!containerData.animationFinish) { |
|---|
| | | ownerInstance.callMethod('changeParentSwiperContainerStyleStatus',{ |
|---|
| | | status: 'reload' |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¤ææ¯å¦ä¸ºä¸ºå½åæ¾ç¤ºçSwiperItem |
|---|
| | | if (itemData.index != state.currentIndex) return |
|---|
| | | |
|---|
| | | var touches = event.changedTouches[0] |
|---|
| | | if (!touches) return |
|---|
| | | |
|---|
| | | // æ è®°æ»å¨å¼å§æ¶é´ |
|---|
| | | state.touchStartTime = getDate().getTime() |
|---|
| | | |
|---|
| | | // è®°å½å½åæ»å¨å¼å§çxï¼yåæ |
|---|
| | | state.touchRelactive = { |
|---|
| | | x: touches.pageX, |
|---|
| | | y: touches.pageY |
|---|
| | | } |
|---|
| | | // è®°å½è§¦æ¸idï¼ç¨äºå¤çå¤æçæ
åµ |
|---|
| | | state.touchId = touches.identifier |
|---|
| | | |
|---|
| | | // æ è®°å¼å§è§¦æ¸ |
|---|
| | | state.touching = true |
|---|
| | | ownerInstance.callMethod('updateTouchingStatus', { |
|---|
| | | status: true |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ£å¨ç§»å¨ |
|---|
| | | var touchMove = function(event, ownerInstance) { |
|---|
| | | console.log('touchMove'); |
|---|
| | | var instance = event.instance |
|---|
| | | var dataset = instance.getDataset() |
|---|
| | | var state = ownerInstance.getState() |
|---|
| | | var itemData = state.itemData |
|---|
| | | var containerData = state.containerData |
|---|
| | | |
|---|
| | | // å¤ææ¯å¦ä¸ºä¸ºå½åæ¾ç¤ºçSwiperItem |
|---|
| | | if (itemData.index != state.currentIndex) return |
|---|
| | | |
|---|
| | | // å¤ææ¯å¦å¼å§è§¦æ¸ |
|---|
| | | if (!state.touching) return |
|---|
| | | |
|---|
| | | var touches = event.changedTouches[0] |
|---|
| | | if (!touches) return |
|---|
| | | // å¤ææ¯å¦ä¸ºåä¸ä¸ªè§¦æ¸ç¹ |
|---|
| | | if (state.touchId != touches.identifier) return |
|---|
| | | |
|---|
| | | var currentTouchRelactive = { |
|---|
| | | x: touches.pageX, |
|---|
| | | y: touches.pageY |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 计ç®ç¸å¯¹ä½ç§»æ¯ä¾ |
|---|
| | | if (containerData.vertical) { |
|---|
| | | var touchDistance = currentTouchRelactive.y - state.touchRelactive.y |
|---|
| | | var itemHeight = itemData.itemHeight |
|---|
| | | var distanceRate = touchDistance / itemHeight |
|---|
| | | // console.log(currentTouchRelactive.y, touchDistance, itemHeight, distanceRate); |
|---|
| | | |
|---|
| | | // å¤ææ¯å¦ä¸ºè¡æ¥è½®æï¼å¦æä¸æ¯è¡æ¥è½®æï¼å¦æå½å为第ä¸ä¸ªswiperItem并ä¸åä¸æ»ãå½å为æåä¸ä¸ªswiperItem并ä¸åä¸æ»æ¶ä¸è¿è¡æä½ |
|---|
| | | if (!containerData.circular && |
|---|
| | | ((state.currentIndex === 0 && touchDistance > 0) || (state.currentIndex === containerData.swiperItemLength - 1 && touchDistance < 0)) |
|---|
| | | ) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¦æè¶
åºäºè·ç¦»åä¸è¿è¡æä½ |
|---|
| | | if((Math.abs(touchDistance) > (itemData.itemTop + itemData.itemHeight))) { |
|---|
| | | ownerInstance.callMethod('updateParentSwiperContainerStyle', { |
|---|
| | | value: distanceRate < 0 ? -1 : 1 |
|---|
| | | }) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | var touchDistance = currentTouchRelactive.x - state.touchRelactive.x |
|---|
| | | var itemWidth = itemData.itemWidth |
|---|
| | | var distanceRate = touchDistance / itemWidth |
|---|
| | | // console.log(currentTouchRelactive.x, touchDistance, itemWidth, distanceRate); |
|---|
| | | |
|---|
| | | // å¤ææ¯å¦ä¸ºè¡æ¥è½®æï¼å¦æä¸æ¯è¡æ¥è½®æï¼å¦æå½å为第ä¸ä¸ªswiperItem并ä¸åå³æ»ãå½å为æåä¸ä¸ªswiperItem并ä¸åå·¦æ»æ¶ä¸è¿è¡æä½ |
|---|
| | | if (!containerData.circular && |
|---|
| | | ((state.currentIndex === 0 && touchDistance > 0) || (state.currentIndex === containerData.swiperItemLength - 1 && touchDistance < 0)) |
|---|
| | | ) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¦æè¶
åºäºè·ç¦»åä¸è¿è¡æä½ |
|---|
| | | if((Math.abs(touchDistance) > (itemData.itemLeft + itemData.itemWidth))) { |
|---|
| | | ownerInstance.callMethod('updateParentSwiperContainerStyle', { |
|---|
| | | value: distanceRate < 0 ? -1 : 1 |
|---|
| | | }) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | ownerInstance.callMethod('updateParentSwiperContainerStyle', { |
|---|
| | | value: distanceRate |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 移å¨ç»æ |
|---|
| | | var touchEnd = function(event, ownerInstance) { |
|---|
| | | console.log('touchEnd'); |
|---|
| | | var instance = event.instance |
|---|
| | | var dataset = instance.getDataset() |
|---|
| | | var state = ownerInstance.getState() |
|---|
| | | var itemData = state.itemData |
|---|
| | | var containerData = state.containerData |
|---|
| | | |
|---|
| | | // å¤ææ¯å¦ä¸ºä¸ºå½åæ¾ç¤ºçSwiperItem |
|---|
| | | if (itemData.index != state.currentIndex) return |
|---|
| | | |
|---|
| | | // å¤ææ¯å¦å¼å§è§¦æ¸ |
|---|
| | | if (!state.touching) return |
|---|
| | | |
|---|
| | | var touches = event.changedTouches[0] |
|---|
| | | if (!touches) return |
|---|
| | | // å¤ææ¯å¦ä¸ºåä¸ä¸ªè§¦æ¸ç¹ |
|---|
| | | if (state.touchId != touches.identifier) return |
|---|
| | | |
|---|
| | | |
|---|
| | | var currentTime = getDate().getTime() |
|---|
| | | var currentTouchRelactive = { |
|---|
| | | x: touches.pageX, |
|---|
| | | y: touches.pageY |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (containerData.vertical) { |
|---|
| | | // å¤æ触æ¸ç§»å¨æ¹å |
|---|
| | | var direction = decideSwiperDirection(state.touchRelactive, currentTouchRelactive, true) |
|---|
| | | // å¤ææ¯å¦ä¸ºè¡æ¥è½®æï¼å¦æä¸æ¯è¡æ¥è½®æï¼å¦æå½å为第ä¸ä¸ªswiperItem并ä¸åä¸æ»ãå½å为æåä¸ä¸ªswiperItem并ä¸åä¸æ»æ¶ä¸è¿è¡æä½ |
|---|
| | | if (containerData.circular || |
|---|
| | | !((state.currentIndex === 0 && direction === 'down') || (state.currentIndex === containerData.swiperItemLength - 1 && direction === 'up')) |
|---|
| | | ) { |
|---|
| | | // å¤æ触æ¸çæ¶é´å移å¨çè·ç¦»æ¯å¦è¶
è¿äºå½åitemHeightçä¸åï¼å¦ææ¯åæ§è¡åæ¢æä½ |
|---|
| | | // console.log(currentTime - state.touchStartTime, Math.abs(currentTouchRelactive.y - state.touchRelactive.y)); |
|---|
| | | if ((currentTime - state.touchStartTime) > 200 && Math.abs(currentTouchRelactive.y - state.touchRelactive.y) < itemData.itemHeight / 2) { |
|---|
| | | ownerInstance.callMethod('changeParentSwiperContainerStyleStatus',{ |
|---|
| | | status: 'reset' |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | // console.log(direction, state.touchRelactive.y, currentTouchRelactive.y); |
|---|
| | | |
|---|
| | | ownerInstance.callMethod('updateParentSwiperContainerStyleWithDirection', { |
|---|
| | | direction: direction |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | // å¤æ触æ¸ç§»å¨æ¹å |
|---|
| | | var direction = decideSwiperDirection(state.touchRelactive, currentTouchRelactive, false) |
|---|
| | | // å¤ææ¯å¦ä¸ºè¡æ¥è½®æï¼å¦æä¸æ¯è¡æ¥è½®æï¼å¦æå½å为第ä¸ä¸ªswiperItem并ä¸åå³æ»ãå½å为æåä¸ä¸ªswiperItem并ä¸åå·¦æ»æ¶ä¸è¿è¡æä½ |
|---|
| | | if (containerData.circular || |
|---|
| | | !((state.currentIndex === 0 && direction === 'right') || (state.currentIndex === containerData.swiperItemLength - 1 && direction === 'left')) |
|---|
| | | ) { |
|---|
| | | // å¤æ触æ¸çæ¶é´å移å¨çè·ç¦»æ¯å¦è¶
è¿äºå½åitemWidthçä¸åï¼å¦ææ¯åæ§è¡åæ¢æä½ |
|---|
| | | // console.log(currentTime - state.touchStartTime, Math.abs(currentTouchRelactive.x - state.touchRelactive.x)); |
|---|
| | | if ((currentTime - state.touchStartTime) > 200 && Math.abs(currentTouchRelactive.x - state.touchRelactive.x) < itemData.itemWidth / 2) { |
|---|
| | | ownerInstance.callMethod('changeParentSwiperContainerStyleStatus',{ |
|---|
| | | status: 'reset' |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | // console.log(direction, state.touchRelactive.x, currentTouchRelactive.x); |
|---|
| | | |
|---|
| | | ownerInstance.callMethod('updateParentSwiperContainerStyleWithDirection', { |
|---|
| | | direction: direction |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ¸
é¤æ è®° |
|---|
| | | state.touchId = null |
|---|
| | | state.touchRelactive = null |
|---|
| | | state.touchStartTime = 0 |
|---|
| | | |
|---|
| | | |
|---|
| | | // æ è®°åæ¢è§¦æ¸ |
|---|
| | | state.touching = true |
|---|
| | | ownerInstance.callMethod('updateTouchingStatus', { |
|---|
| | | status: false |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | module.exports = { |
|---|
| | | itemDataObserver: itemDataObserver, |
|---|
| | | currentIndexObserver: currentIndexObserver, |
|---|
| | | containerDataObserver: containerDataObserver, |
|---|
| | | touchStart: touchStart, |
|---|
| | | touchMove: touchMove, |
|---|
| | | touchEnd: touchEnd |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- #ifdef MP-WEIXIN --> |
|---|
| | | <view |
|---|
| | | class="tn-c-swiper-item" |
|---|
| | | :style="[swiperStyle]" |
|---|
| | | :itemData="itemData" |
|---|
| | | :currentIndex="currentIndex" |
|---|
| | | :containerData="containerData" |
|---|
| | | :change:itemData="wxs.itemDataObserver" |
|---|
| | | :change:currentIndex="wxs.currentIndexObserver" |
|---|
| | | :change:containerData="wxs.containerDataObserver" |
|---|
| | | @touchstart="wxs.touchStart" |
|---|
| | | :catch:touchmove="touching?wxs.touchMove:''" |
|---|
| | | :catch:touchend="touching?wxs.touchEnd:''" |
|---|
| | | > |
|---|
| | | <view class="item__container tn-c-swiper-item__container" :style="[containerStyle]"> |
|---|
| | | <slot></slot> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <!-- #endif --> |
|---|
| | | <!-- #ifndef MP-WEIXIN --> |
|---|
| | | <view |
|---|
| | | class="tn-c-swiper-item" |
|---|
| | | :style="[swiperStyle]" |
|---|
| | | :itemData="itemData" |
|---|
| | | :currentIndex="currentIndex" |
|---|
| | | :containerData="containerData" |
|---|
| | | :change:itemData="wxs.itemDataObserver" |
|---|
| | | :change:currentIndex="wxs.currentIndexObserver" |
|---|
| | | :change:containerData="wxs.containerDataObserver" |
|---|
| | | @touchstart="wxs.touchStart" |
|---|
| | | @touchmove="wxs.touchMove" |
|---|
| | | @touchend="wxs.touchEnd" |
|---|
| | | > |
|---|
| | | <view class="item__container tn-c-swiper-item__container" :style="[containerStyle]"> |
|---|
| | | <slot></slot> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <!-- #endif --> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script src="./index.wxs" lang="wxs" module="wxs"></script> |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'tn-custom-swiper-item', |
|---|
| | | props: { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // swiperItemå
Œ
±æ°æ® |
|---|
| | | itemData() { |
|---|
| | | return { |
|---|
| | | index: this.index, |
|---|
| | | itemWidth: this.itemWidth, |
|---|
| | | itemHeight: this.itemHeight, |
|---|
| | | itemTop: this.itemTop, |
|---|
| | | itemLeft: this.itemLeft |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | currentIndex() { |
|---|
| | | return this.parentData.currentIndex |
|---|
| | | }, |
|---|
| | | containerData() { |
|---|
| | | return { |
|---|
| | | duration: this.parentData.duration, |
|---|
| | | animationFinish: this.parentData.swiperContainerAnimationFinish, |
|---|
| | | circular: this.parentData.circular, |
|---|
| | | swiperItemLength: this.swiperItemLength, |
|---|
| | | vertical: this.parentData.vertical |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | swiperStyle() { |
|---|
| | | let style = {} |
|---|
| | | style.transform = `translate3d(${this.translateX}%, ${this.translateY}%, 0px)` |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | containerStyle() { |
|---|
| | | let style = {} |
|---|
| | | if (this.parentData.customSwiperStyle && Object.keys(this.parentData.customSwiperStyle).length > 0) { |
|---|
| | | style = this.parentData.customSwiperStyle |
|---|
| | | } |
|---|
| | | if ((this.currentIndex === 0 && this.index === this.swiperItemLength - 1) || (this.index === this.currentIndex - 1) && |
|---|
| | | (this.parentData.prevSwiperStyle && Object.keys(this.parentData.prevSwiperStyle).length > 0) |
|---|
| | | ) { |
|---|
| | | // åä¸ä¸ªswiperItem |
|---|
| | | const copyStyle = JSON.parse(JSON.stringify(style)) |
|---|
| | | style = Object.assign(copyStyle, this.parentData.prevSwiperStyle) |
|---|
| | | } |
|---|
| | | if ((this.currentIndex === this.swiperItemLength - 1 && this.index === 0) || (this.index === this.currentIndex + 1) && |
|---|
| | | (this.parentData.nextSwiperStyle && Object.keys(this.parentData.nextSwiperStyle).length > 0) |
|---|
| | | ) { |
|---|
| | | // åä¸ä¸ªswiperItem |
|---|
| | | const copyStyle = JSON.parse(JSON.stringify(style)) |
|---|
| | | style = Object.assign(copyStyle, this.parentData.nextSwiperStyle) |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // ç¶ç»ä»¶åæ° |
|---|
| | | parentData: { |
|---|
| | | duration: 500, |
|---|
| | | currentIndex: 0, |
|---|
| | | swiperContainerAnimationFinish: false, |
|---|
| | | circular: false, |
|---|
| | | vertical: false, |
|---|
| | | prevSwiperStyle: {}, |
|---|
| | | customSwiperStyle: {}, |
|---|
| | | nextSwiperStyle: {} |
|---|
| | | }, |
|---|
| | | // æ è®°å½åæ¯å¦æ£å¨è§¦æ¸ |
|---|
| | | touching: true, |
|---|
| | | // å½åswiperItemçå移ä½ç½® |
|---|
| | | translateX: 0, |
|---|
| | | translateY: 0, |
|---|
| | | // å½åswiperItemçå®½é« |
|---|
| | | itemWidth: 0, |
|---|
| | | itemHeight: 0, |
|---|
| | | // å½åswiperItemçä½ç½®ä¿¡æ¯ |
|---|
| | | itemTop: 0, |
|---|
| | | itemLeft: 0, |
|---|
| | | // å½åswiperItemçç¶æ prev current next |
|---|
| | | status: 'current', |
|---|
| | | // å½åswiperItemçindexåºå· |
|---|
| | | index: 0, |
|---|
| | | // swiperItemççæ°é |
|---|
| | | swiperItemLength: 0 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.parent = false |
|---|
| | | this.updateParentData() |
|---|
| | | // è·åå½åç¶ç»ä»¶childrençæ°éä½ä¸ºå½åswiperItemçåºå· |
|---|
| | | this.index = this.parent.children.length |
|---|
| | | this.parent && this.parent.children.push(this) |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.initSwiperItem() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // åå§åswiperItem |
|---|
| | | initSwiperItem() { |
|---|
| | | this.getSwiperItemRect(() => { |
|---|
| | | this.parent.updateAllSwiperItemStyle() |
|---|
| | | this.parentData.swiperContainerAnimationFinish = true |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // è·åswiperItemçä¿¡æ¯ |
|---|
| | | async getSwiperItemRect(callback) { |
|---|
| | | const swiperItemRes = await this._tGetRect('.tn-c-swiper-item') |
|---|
| | | if (!swiperItemRes.height || !swiperItemRes.width) { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.getSwiperItemRect() |
|---|
| | | }, 30) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.itemWidth = swiperItemRes.width |
|---|
| | | this.itemHeight = swiperItemRes.height |
|---|
| | | this.itemTop = swiperItemRes.top |
|---|
| | | this.itemLeft = swiperItemRes.left |
|---|
| | | callback && callback() |
|---|
| | | }, |
|---|
| | | // æ´æ°swiperItemæ ·å¼ |
|---|
| | | updateSwiperItemStyle(swiperItemLength, currentIndex = undefined) { |
|---|
| | | currentIndex = currentIndex != undefined ? currentIndex : this.parentData.currentIndex |
|---|
| | | this.swiperItemLength = swiperItemLength |
|---|
| | | // æ ¹æ®å½åswiperItemçåºå·è®¾ç½®å移ä½ç½® |
|---|
| | | // å¤æå½åswiperItemæ¯å¦ä¸ºç¬¬ä¸ä¸ªï¼å¦ææ¯åå°æåçswiperItem移å¨å°å½åçåä¸ä¸ªä½ç½®ï¼å³æåé¢ï¼ |
|---|
| | | if (currentIndex === 0 && this.index === swiperItemLength - 1) { |
|---|
| | | if (this.parentData.vertical) { |
|---|
| | | this.translateX = 0 |
|---|
| | | this.translateY = -100 |
|---|
| | | } else { |
|---|
| | | this.translateX = -100 |
|---|
| | | this.translateY = 0 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // å¤æå½åswiperItemæ¯å¦ä¸ºæåä¸ä¸ªï¼å¦ææ¯åå°æåçswiperItem移å¨å°å½åçåä¸ä¸ªä½ç½®ï¼å³æåé¢ï¼ |
|---|
| | | else if (currentIndex === swiperItemLength - 1 && this.index === 0) { |
|---|
| | | if (this.parentData.vertical) { |
|---|
| | | this.translateX = 0 |
|---|
| | | this.translateY = swiperItemLength * 100 |
|---|
| | | } else { |
|---|
| | | this.translateX = swiperItemLength * 100 |
|---|
| | | this.translateY = 0 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // æ£å¸¸æ
åµ |
|---|
| | | else { |
|---|
| | | if (this.parentData.vertical) { |
|---|
| | | this.translateX = 0 |
|---|
| | | this.translateY = this.index * 100 |
|---|
| | | } else { |
|---|
| | | this.translateX = this.index * 100 |
|---|
| | | this.translateY = 0 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ´æ°ç¶ç»ä»¶çå移ä½ç½®ä¿¡æ¯ |
|---|
| | | updateParentSwiperContainerStyle(e) { |
|---|
| | | this.parent.updateSwiperContainerStyleWithValue(e.value) |
|---|
| | | }, |
|---|
| | | // æ ¹æ®æ¹åæ´æ°ç¶ç»ä»¶çå移ä½ç½®ä¿¡æ¯ |
|---|
| | | updateParentSwiperContainerStyleWithDirection(e) { |
|---|
| | | this.parent.updateSwiperContainerStyleWithDirection(e.direction) |
|---|
| | | }, |
|---|
| | | // ä¿®æ¹ç¶ç»ä»¶çå移ä½ç½®çç¶æ |
|---|
| | | changeParentSwiperContainerStyleStatus(e) { |
|---|
| | | // reset -> éç½® reload -> éè½½ |
|---|
| | | this.parent.updateSwiperContainerStyleWithDirection(e.status) |
|---|
| | | }, |
|---|
| | | // æ´æ°ç¶ç»ä»¶ä¿¡æ¯ |
|---|
| | | updateParentData() { |
|---|
| | | this.getParentData('tn-custom-swiper') |
|---|
| | | }, |
|---|
| | | // æ´æ°è§¦æ¸ç¶æ |
|---|
| | | updateTouchingStatus(e) { |
|---|
| | | this.touching = e.status |
|---|
| | | if (e.status) { |
|---|
| | | this.parent.stopAutoPlay() |
|---|
| | | } else { |
|---|
| | | this.parent.startAutoPlay() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æå对åºç¨æ·èªå®ä¹æ ·å¼ |
|---|
| | | extractCustomStyle(customStyle) { |
|---|
| | | let data = { |
|---|
| | | transform: {}, |
|---|
| | | style: {} |
|---|
| | | } |
|---|
| | | if (!customStyle) return data |
|---|
| | | // å
许设置çtransformåæ° |
|---|
| | | const allowTransformProps = ['scale','scaleX','scaleY','scaleZ','rotate','rotateX','rotateY','rotateZ'] |
|---|
| | | for (let prop in customStyle) { |
|---|
| | | if (prop.startsWith('transformProp')) { |
|---|
| | | // transforméé¢çæ ·å¼ |
|---|
| | | let transformProp = prop.substring('transformProp'.length) |
|---|
| | | const index = allowTransformProps.findIndex((item) => { |
|---|
| | | return item.toLowerCase() === transformProp.toLowerCase() |
|---|
| | | }) |
|---|
| | | if (index !== -1) { |
|---|
| | | transformProp = allowTransformProps[index] |
|---|
| | | data.transform[transformProp] = customStyle[prop] |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | // æ®éæ ·å¼ |
|---|
| | | data.style[prop] = customStyle[prop] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return data |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .tn-c-swiper-item { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | position: absolute; |
|---|
| | | display: block; |
|---|
| | | will-change: transform; |
|---|
| | | cursor: none; |
|---|
| | | transform: translate3d(0px, 0px, 0px); |
|---|
| | | |
|---|
| | | .item__container { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | display: block; |
|---|
| | | position: absolute; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="tn-c-swiper-class tn-c-swiper" |
|---|
| | | > |
|---|
| | | <!-- è½®æitem容å¨--> |
|---|
| | | <view class="tn-swiper__container" :style="[swiperContainerStyle]" :animation="containerAnimation"> |
|---|
| | | <slot></slot> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <!-- è½®ææ示å¨--> |
|---|
| | | <view v-if="indicator" class="tn-swiper__indicator" :class="[`tn-swiper__indicator--${vertical ? 'vertical' : 'horizontal'}`]" :style="[indicatorStyle]"> |
|---|
| | | <!-- æ¹å½¢ --> |
|---|
| | | <block v-if="indicatorType === 'rect'"> |
|---|
| | | <view |
|---|
| | | v-for="(item, index) in children.length" |
|---|
| | | :key="index" |
|---|
| | | class="tn-swiper__indicator__rect" |
|---|
| | | :class="[ |
|---|
| | | `tn-swiper__indicator__rect--${vertical ? 'vertical' : 'horizontal'}`, |
|---|
| | | currentIndex === index ? `tn-swiper__indicator__rect--active tn-swiper__indicator__rect--active--${vertical ? 'vertical' : 'horizontal'}` : '' |
|---|
| | | ]" |
|---|
| | | :style="[indicatorPointStyle(index)]" |
|---|
| | | ></view> |
|---|
| | | </block> |
|---|
| | | <!-- ç¹ --> |
|---|
| | | <block v-if="indicatorType === 'dot'"> |
|---|
| | | <view |
|---|
| | | v-for="(item, index) in children.length" |
|---|
| | | :key="index" |
|---|
| | | class="tn-swiper__indicator__dot" |
|---|
| | | :class="[ |
|---|
| | | `tn-swiper__indicator__dot--${vertical ? 'vertical' : 'horizontal'}`, |
|---|
| | | currentIndex === index ? `tn-swiper__indicator__dot--active tn-swiper__indicator__dot--active--${vertical ? 'vertical' : 'horizontal'}` : '' |
|---|
| | | ]" |
|---|
| | | :style="[indicatorPointStyle(index)]" |
|---|
| | | ></view> |
|---|
| | | </block> |
|---|
| | | <!-- åè§æ¹å½¢ --> |
|---|
| | | <block v-if="indicatorType === 'round'"> |
|---|
| | | <view |
|---|
| | | v-for="(item, index) in children.length" |
|---|
| | | :key="index" |
|---|
| | | class="tn-swiper__indicator__round" |
|---|
| | | :class="[ |
|---|
| | | `tn-swiper__indicator__round--${vertical ? 'vertical' : 'horizontal'}`, |
|---|
| | | currentIndex === index ? `tn-swiper__indicator__round--active tn-swiper__indicator__round--active--${vertical ? 'vertical' : 'horizontal'}` : '' |
|---|
| | | ]" |
|---|
| | | :style="[indicatorPointStyle(index)]" |
|---|
| | | ></view> |
|---|
| | | </block> |
|---|
| | | <!-- åºå· --> |
|---|
| | | <block v-if="indicatorType === 'number' && !vertical"> |
|---|
| | | <view class="tn-swiper__indicator__number">{{ currentIndex + 1 }}/{{ children.length }}</view> |
|---|
| | | </block> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'tn-custom-swiper', |
|---|
| | | props: { |
|---|
| | | // å½åæå¨çè½®æä½ç½® |
|---|
| | | current: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // èªå¨åæ¢ |
|---|
| | | autoplay: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // èªå¨åæ¢æ¶é´é´é |
|---|
| | | interval: { |
|---|
| | | type: Number, |
|---|
| | | default: 5000 |
|---|
| | | }, |
|---|
| | | // æ»å¨å¨ç»æ¶é¿ |
|---|
| | | duration: { |
|---|
| | | type: Number, |
|---|
| | | default: 500 |
|---|
| | | }, |
|---|
| | | // æ¯å¦éç¨è¡æ¥æ»å¨ |
|---|
| | | circular: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // æ»å¨æ¹å为纵å |
|---|
| | | vertical: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // æ¾ç¤ºæç¤ºç¹ |
|---|
| | | indicator: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // æ示ç¹ç±»å |
|---|
| | | // rect -> æ¹å½¢ round -> åè§æ¹å½¢ dot -> ç¹ number -> è½®æå¾ä¸æ |
|---|
| | | indicatorType: { |
|---|
| | | type: String, |
|---|
| | | default: 'dot' |
|---|
| | | }, |
|---|
| | | // æ示ç¹çä½ç½® |
|---|
| | | // topLeft \ topCenter \ topRight \ bottomLeft \ bottomCenter \ bottomRight |
|---|
| | | indicatorPosition: { |
|---|
| | | type: String, |
|---|
| | | default: 'bottomCenter' |
|---|
| | | }, |
|---|
| | | // æ示ç¹æ¿æ´»æ¶é¢è² |
|---|
| | | indicatorActiveColor: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // æ示ç¹æªæ¿æ´»æ¶é¢è² |
|---|
| | | indicatorInactiveColor: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // åä¸ä¸ªè½®æçèªå®ä¹æ ·å¼ |
|---|
| | | prevSwiperStyle: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // å½åè½®æçèªå®ä¹æ ·å¼ |
|---|
| | | customSwiperStyle: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // åä¸ä¸ªè½®æçèªå®ä¹æ ·å¼ |
|---|
| | | nextSwiperStyle: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | parentData() { |
|---|
| | | return [ |
|---|
| | | this.duration, |
|---|
| | | this.currentIndex, |
|---|
| | | this.swiperContainerAnimationFinish, |
|---|
| | | this.circular, |
|---|
| | | this.vertical, |
|---|
| | | this.prevSwiperStyle, |
|---|
| | | this.customSwiperStyle, |
|---|
| | | this.nextSwiperStyle |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | indicatorStyle() { |
|---|
| | | let style = {} |
|---|
| | | if (this.vertical) { |
|---|
| | | if (this.indicatorPosition === 'topLeft' || this.indicatorPosition === 'bottomLeft') style.justifyContent = 'flex-start' |
|---|
| | | if (this.indicatorPosition === 'topCenter' || this.indicatorPosition === 'bottomCenter') style.justifyContent = 'center' |
|---|
| | | if (this.indicatorPosition === 'topRight' || this.indicatorPosition === 'bottomRight') style.justifyContent = 'flex-end' |
|---|
| | | if (['topLeft','topCenter','topRight'].indexOf(this.indicatorPosition) >= 0) { |
|---|
| | | if (this.vertical) { |
|---|
| | | style.right = '12rpx' |
|---|
| | | style.left = 'auto' |
|---|
| | | } else { |
|---|
| | | style.top = '12rpx' |
|---|
| | | style.bottom = 'auto' |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | if (this.vertical) { |
|---|
| | | style.right = 'auto' |
|---|
| | | style.left = '12rpx' |
|---|
| | | } else { |
|---|
| | | style.top = 'auto' |
|---|
| | | style.bottom = '12rpx' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | if (this.indicatorPosition === 'topLeft' || this.indicatorPosition === 'bottomLeft') style.justifyContent = 'flex-start' |
|---|
| | | if (this.indicatorPosition === 'topCenter' || this.indicatorPosition === 'bottomCenter') style.justifyContent = 'center' |
|---|
| | | if (this.indicatorPosition === 'topRight' || this.indicatorPosition === 'bottomRight') style.justifyContent = 'flex-end' |
|---|
| | | if (['topLeft','topCenter','topRight'].indexOf(this.indicatorPosition) >= 0) { |
|---|
| | | style.top = '12rpx' |
|---|
| | | style.bottom = 'auto' |
|---|
| | | } else { |
|---|
| | | style.top = 'auto' |
|---|
| | | style.bottom = '12rpx' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | indicatorPointStyle() { |
|---|
| | | return (index) => { |
|---|
| | | let style = {} |
|---|
| | | if (index === this.currentIndex && this.indicatorActiveColor !== '') { |
|---|
| | | style.backgroundColor = this.indicatorActiveColor |
|---|
| | | } else if (this.indicatorInactiveColor !== '') { |
|---|
| | | style.backgroundColor = this.indicatorInactiveColor |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | parentData() { |
|---|
| | | if (this.children.length) { |
|---|
| | | this.children.forEach((item) => { |
|---|
| | | // å¤æåç»ä»¶å¦ææupdateParentDataæ¹æ³çè¯ï¼å°±å°±æ§è¡(æ§è¡çç»ææ¯åç»ä»¶éæ°ä»ç¶ç»ä»¶æåäºææ°çå¼) |
|---|
| | | typeof(item.updateParentData) === 'function' && item.updateParentData() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | current(nVal, oVal) { |
|---|
| | | if (this.currentIndex === nVal) return |
|---|
| | | this.currentIndex = nVal > this.children.length ? this.children.length - 1 : nVal |
|---|
| | | this.swiperContainerAnimationFinish = false |
|---|
| | | // 设置å¨ç»è¿æ¸¡æ¶é´ |
|---|
| | | this.swiperContainerStyle.transitionDuration = `${this.duration + 90}ms` |
|---|
| | | this.updateSwiperContainerItem(oVal) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // æ¸
é¤å¨ç»å®æ¶å¨ |
|---|
| | | clearAnimationTimer: null, |
|---|
| | | // ååè¡æ¥æ§è¡å®æ¶å¨ |
|---|
| | | convergeTimer: null, |
|---|
| | | // èªå¨è½®æTimer |
|---|
| | | autoPlayTimer: null, |
|---|
| | | // å½åéä¸çè½®æ |
|---|
| | | currentIndex: this.current, |
|---|
| | | // swiperContaineræ ·å¼ |
|---|
| | | swiperContainerStyle: { |
|---|
| | | transform: 'translate3d(0px, 0px, 0px)', |
|---|
| | | transitionDuration: '0ms' |
|---|
| | | }, |
|---|
| | | // swiperContainerå¨ç» |
|---|
| | | containerAnimation: {}, |
|---|
| | | // æ»å¨å¨ç»ç»ææ è®° |
|---|
| | | swiperContainerAnimationFinish: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.children = [] |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | const index = this.currentIndex > this.children.length ? this.children.length - 1 : this.currentIndex |
|---|
| | | this.updateSwiperContainerStyle(index) |
|---|
| | | this.startAutoPlay() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // æ´æ°å
¨é¨swiperItemçæ ·å¼ |
|---|
| | | updateAllSwiperItemStyle() { |
|---|
| | | this.children.forEach((item, index) => { |
|---|
| | | typeof(item.updateSwiperItemStyle) === 'function' && item.updateSwiperItemStyle(this.children.length) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | }, |
|---|
| | | // æ ¹æ®swiperIndexæ´æ°swiperItemContainerçæ ·å¼ |
|---|
| | | updateSwiperContainerStyle(index) { |
|---|
| | | if (this.vertical) { |
|---|
| | | this.swiperContainerStyle.transform = `translate3d(0px, ${-index * 100}%, 0px)` |
|---|
| | | } else { |
|---|
| | | this.swiperContainerStyle.transform = `translate3d(${-index * 100}%, 0px, 0px)` |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ ¹æ®ä¼ éçå¼æ´æ°swiperItemContainerçä½ç½® |
|---|
| | | updateSwiperContainerStyleWithValue(value) { |
|---|
| | | if (this.vertical) { |
|---|
| | | this.swiperContainerStyle.transform = `translate3d(0px, ${(-this.currentIndex * 100) + value * 100}%, 0px)` |
|---|
| | | } else { |
|---|
| | | this.swiperContainerStyle.transform = `translate3d(${(-this.currentIndex * 100) + value * 100}%, 0px, 0px)` |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ ¹æ®ä¼ éçæ¹åæ´æ°swiperItemContainerçä½ç½® |
|---|
| | | updateSwiperContainerStyleWithDirection(direction) { |
|---|
| | | const oldCurrent = this.currentIndex |
|---|
| | | const childrenLength = this.children.length |
|---|
| | | const lastSwiperItemIndex = childrenLength - 1 |
|---|
| | | this.swiperContainerAnimationFinish = false |
|---|
| | | |
|---|
| | | |
|---|
| | | // åååæ¢ä¸ä¸ªSwiperItem |
|---|
| | | if (direction === 'reset') { |
|---|
| | | // 设置å¨ç»è¿æ¸¡æ¶é´ |
|---|
| | | this.swiperContainerStyle.transitionDuration = `${this.duration}ms` |
|---|
| | | this.updateSwiperContainerStyle(this.currentIndex) |
|---|
| | | this.clearAnimationTimer = setTimeout(() => { |
|---|
| | | this.clearSwiperContainerAnimation() |
|---|
| | | }, this.duration) |
|---|
| | | } else if (direction === 'reload') { |
|---|
| | | this.clearConvergeSwiperItemTimer() |
|---|
| | | this.clearSwiperContainerAnimation() |
|---|
| | | this.updateSwiperItemStyle(0) |
|---|
| | | this.updateSwiperItemStyle(lastSwiperItemIndex) |
|---|
| | | } else { |
|---|
| | | if (direction === 'left' || direction === 'up') { |
|---|
| | | if (oldCurrent === childrenLength - 1 && !this.circular) { |
|---|
| | | this.clearSwiperContainerAnimation() |
|---|
| | | this.clearConvergeSwiperItemTimer() |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.currentIndex = oldCurrent + 1 >= childrenLength ? 0 : oldCurrent + 1 |
|---|
| | | } else if (direction === 'right' || direction === 'down') { |
|---|
| | | if (oldCurrent === 0 && !this.circular) { |
|---|
| | | this.clearSwiperContainerAnimation() |
|---|
| | | this.clearConvergeSwiperItemTimer() |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.currentIndex = oldCurrent - 1 < 0 ? childrenLength - 1 : oldCurrent - 1 |
|---|
| | | } |
|---|
| | | // 设置å¨ç»è¿æ¸¡æ¶é´ |
|---|
| | | this.swiperContainerStyle.transitionDuration = `${this.duration + 90}ms` |
|---|
| | | // this.updateSwiperItemContainerRect(this.currentIndex) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // console.log(direction, oldCurrent, this.currentIndex); |
|---|
| | | this.updateSwiperContainerItem(oldCurrent) |
|---|
| | | |
|---|
| | | // åæ¢è½®ææ¶è§¦åäºä»¶ |
|---|
| | | this.$emit('change', { |
|---|
| | | current: this.currentIndex |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // 设置èªå¨è½®æ |
|---|
| | | startAutoPlay() { |
|---|
| | | if (this.autoplay && !this.autoPlayTimer && this.circular) { |
|---|
| | | this.autoPlayTimer = setInterval(() => { |
|---|
| | | this.updateSwiperContainerStyleWithDirection('left') |
|---|
| | | }, this.interval) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // åæ¢èªå¨è½®æ |
|---|
| | | stopAutoPlay() { |
|---|
| | | if (this.autoPlayTimer) { |
|---|
| | | clearInterval(this.autoPlayTimer) |
|---|
| | | this.autoPlayTimer = null |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ´æ°swiperContaineråswiperItemç¸å
³èä¿¡æ¯ |
|---|
| | | updateSwiperContainerItem(oldCurrent) { |
|---|
| | | const childrenLength = this.children.length |
|---|
| | | const lastSwiperItemIndex = childrenLength - 1 |
|---|
| | | // å¤æå½åæ¯å¦ä¸ºå¤´å°¾ï¼å¦ææ¯æ´æ°å¯¹åºç头尾SwiperItemæ ·å¼ |
|---|
| | | // æ´æ°swiperItemContainerçæ ·å¼ |
|---|
| | | if (oldCurrent === 0 && this.currentIndex === lastSwiperItemIndex) { |
|---|
| | | // å
移å¨å°æ左边ç¶ååå»é¤å¨ç»å移å°æ£å¸¸çä½ç½® |
|---|
| | | // this.swiperContainerStyle.transform = `translate3d(100%, 0px, 0px)` |
|---|
| | | this.updateSwiperContainerStyle(-1) |
|---|
| | | this.clearSwiperContainerAnimationTimer() |
|---|
| | | this.clearAnimationTimer = setTimeout(() => { |
|---|
| | | this.convergeSwiperItem() |
|---|
| | | }, this.duration) |
|---|
| | | } else if (oldCurrent === lastSwiperItemIndex && this.currentIndex === 0) { |
|---|
| | | // å
移å¨å°æå³è¾¹ç¶ååå»é¤å¨ç»å移å°æ£å¸¸çä½ç½® |
|---|
| | | // this.swiperContainerStyle.transform = `translate3d(${-childrenLength * 100}%, 0px, 0px)` |
|---|
| | | this.updateSwiperContainerStyle(childrenLength) |
|---|
| | | this.clearSwiperContainerAnimationTimer() |
|---|
| | | this.clearAnimationTimer = setTimeout(() => { |
|---|
| | | this.convergeSwiperItem() |
|---|
| | | }, this.duration) |
|---|
| | | } else { |
|---|
| | | this.updateSwiperContainerStyle(this.currentIndex) |
|---|
| | | this.updateSwiperItemStyle(0) |
|---|
| | | this.updateSwiperItemStyle(lastSwiperItemIndex) |
|---|
| | | this.clearAnimationTimer = setTimeout(() => { |
|---|
| | | this.clearSwiperContainerAnimation() |
|---|
| | | }, this.duration) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ´æ°å¯¹åºswiperItemçä¿¡æ¯ |
|---|
| | | updateSwiperItemStyle(index) { |
|---|
| | | const childrenLength = this.children.length |
|---|
| | | if (index < 0) index = 0 |
|---|
| | | if (index > childrenLength - 1) index = childrenLength - 1 |
|---|
| | | |
|---|
| | | typeof(this.children[index].updateSwiperItemStyle) === 'function' && this.children[index].updateSwiperItemStyle(childrenLength, this.currentIndex) |
|---|
| | | }, |
|---|
| | | // æ´æ°å¯¹åºswiperItemç容å¨ä¿¡æ¯ |
|---|
| | | updateSwiperItemContainerRect(index) { |
|---|
| | | const childrenLength = this.children.length |
|---|
| | | if (index < 0) index = 0 |
|---|
| | | if (index > childrenLength - 1) index = childrenLength - 1 |
|---|
| | | |
|---|
| | | typeof(this.children[index].getSwiperItemRect) === 'function' && this.children[index].getSwiperItemRect() |
|---|
| | | }, |
|---|
| | | // æ§è¡ååè¡æ¥ |
|---|
| | | convergeSwiperItem() { |
|---|
| | | const lastSwiperItemIndex = this.children.length - 1 |
|---|
| | | this.clearSwiperContainerAnimation() |
|---|
| | | this.clearConvergeSwiperItemTimer() |
|---|
| | | this.convergeTimer = setTimeout(() => { |
|---|
| | | this.updateSwiperItemStyle(0) |
|---|
| | | this.updateSwiperItemStyle(lastSwiperItemIndex) |
|---|
| | | this.updateSwiperContainerStyle(this.currentIndex) |
|---|
| | | this.clearConvergeSwiperItemTimer() |
|---|
| | | }, 30) |
|---|
| | | }, |
|---|
| | | // åæ¢/æ¸
é¤åæ¢å¨ç» |
|---|
| | | clearSwiperContainerAnimation() { |
|---|
| | | this.swiperContainerStyle.transitionDuration = `0ms` |
|---|
| | | this.swiperContainerAnimationFinish = true |
|---|
| | | this.clearSwiperContainerAnimationTimer() |
|---|
| | | }, |
|---|
| | | // åæ¢/æ¸
é¤æ§è¡ååè¡æ¥å®æ¶å¨ |
|---|
| | | clearConvergeSwiperItemTimer() { |
|---|
| | | if (this.convergeTimer) { |
|---|
| | | clearTimeout(this.convergeTimer) |
|---|
| | | this.convergeTimer = null |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // åæ¢/æ¸
é¤åæ¢å¨ç»å®æ¶å¨ |
|---|
| | | clearSwiperContainerAnimationTimer() { |
|---|
| | | if (this.clearAnimationTimer) { |
|---|
| | | clearTimeout(this.clearAnimationTimer) |
|---|
| | | this.clearAnimationTimer = null |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .tn-c-swiper { |
|---|
| | | position: relative; |
|---|
| | | overflow: hidden; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | |
|---|
| | | .tn-swiper { |
|---|
| | | &__container { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | |
|---|
| | | will-change: transform; |
|---|
| | | transition-property: all; |
|---|
| | | transition-timing-function: ease-out; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__indicator { |
|---|
| | | position: absolute; |
|---|
| | | display: flex; |
|---|
| | | z-index: 1; |
|---|
| | | |
|---|
| | | &--horizontal { |
|---|
| | | padding: 0 24rpx; |
|---|
| | | flex-direction: row; |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | &--vertical { |
|---|
| | | padding: 24rpx 0; |
|---|
| | | flex-direction: column; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__rect { |
|---|
| | | background-color: rgba(0, 0, 0, 0.3); |
|---|
| | | transition: all 0.5s; |
|---|
| | | |
|---|
| | | &--horizontal { |
|---|
| | | width: 26rpx; |
|---|
| | | height: 8rpx; |
|---|
| | | } |
|---|
| | | &--vertical { |
|---|
| | | width: 8rpx; |
|---|
| | | height: 26rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--active { |
|---|
| | | background-color: rgba(255, 255, 255, 0.8); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__dot { |
|---|
| | | width: 14rpx; |
|---|
| | | height: 14rpx; |
|---|
| | | border-radius: 20rpx; |
|---|
| | | background-color: rgba(0, 0, 0, 0.3); |
|---|
| | | transition: all 0.5s; |
|---|
| | | |
|---|
| | | &--horizontal { |
|---|
| | | margin: 0 6rpx; |
|---|
| | | } |
|---|
| | | &--vertical { |
|---|
| | | margin: 6rpx 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--active { |
|---|
| | | background-color: rgba(255, 255, 255, 0.8); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__round { |
|---|
| | | width: 14rpx; |
|---|
| | | height: 14rpx; |
|---|
| | | border-radius: 20rpx; |
|---|
| | | background-color: rgba(0, 0, 0, 0.3); |
|---|
| | | transition: all 0.5s; |
|---|
| | | |
|---|
| | | &--horizontal { |
|---|
| | | margin: 0 6rpx; |
|---|
| | | } |
|---|
| | | &--vertical { |
|---|
| | | margin: 6rpx 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--active { |
|---|
| | | background-color: rgba(255, 255, 255, 0.8); |
|---|
| | | |
|---|
| | | &--horizontal { |
|---|
| | | width: 34rpx; |
|---|
| | | } |
|---|
| | | &--vertical { |
|---|
| | | height: 34rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__number { |
|---|
| | | padding: 6rpx 16rpx; |
|---|
| | | line-height: 1; |
|---|
| | | background-color: rgba(0, 0, 0, 0.3); |
|---|
| | | color: rgba(255, 255, 255, 0.8); |
|---|
| | | border-radius: 100rpx; |
|---|
| | | font-size: 26rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | // å¤ææ¯å¦åºç |
|---|
| | | var isOutRange = function(x1, y1, x2, y2, x3, y3) { |
|---|
| | | return x1 < 0 || x1 >= y1 || x2 < 0 || x2 >= y2 || x3 < 0 || x3 >= y3 |
|---|
| | | } |
|---|
| | | var edit = false |
|---|
| | | |
|---|
| | | function bool(str) { |
|---|
| | | return str === 'true' || str === true |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * æåºæ ¸å¿ |
|---|
| | | * @param {Object} startKey å¼å§æ¶ä½ç½® |
|---|
| | | * @param {Object} endKey ç»ææ¶ä½ç½® |
|---|
| | | * @param {Object} instance wxså
çå±é¨åéå¿«ç
§ |
|---|
| | | */ |
|---|
| | | var sortCore = function(startKey, endKey, state) { |
|---|
| | | var basedata = state.basedata |
|---|
| | | var excludeFix = function(sortKey, type) { |
|---|
| | | // fixed å
ç´ ä½ç½®ä¸ä¼åå, è¿éç´æ¥ç¨ sortKey è·åï¼æ´å ä¾¿æ· |
|---|
| | | if (state.list[sortKey].fixed) { |
|---|
| | | var _sortKey = type ? --sortKey : ++sortKey |
|---|
| | | return excludeFix(sortKey, type) |
|---|
| | | } |
|---|
| | | return sortKey |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å
è·åå° endKey 对åºç realKey, é²æ¢ä¸é¢æåºè¿ç¨ä¸è¯¥ realKey è¢«ä¿®æ¹ |
|---|
| | | var endRealKey = -1 |
|---|
| | | state.list.forEach(function(item) { |
|---|
| | | if (item.sortKey === endKey) endRealKey = item.realKey |
|---|
| | | }) |
|---|
| | | |
|---|
| | | return state.list.map(function(item) { |
|---|
| | | if (item.fixed) return item |
|---|
| | | var sortKey = item.sortKey |
|---|
| | | var realKey = item.realKey |
|---|
| | | |
|---|
| | | if (startKey < endKey) { |
|---|
| | | // æ£åºæå¨ |
|---|
| | | if (sortKey > startKey && sortKey <= endKey) { |
|---|
| | | --realKey |
|---|
| | | sortKey = excludeFix(--sortKey, true) |
|---|
| | | } else if (sortKey === startKey) { |
|---|
| | | realKey = endRealKey |
|---|
| | | sortKey = endKey |
|---|
| | | } |
|---|
| | | } else if (startKey > endKey) { |
|---|
| | | // ååºæå¨ |
|---|
| | | if (sortKey >= endKey && sortKey < startKey) { |
|---|
| | | ++realKey |
|---|
| | | sortKey = excludeFix(++sortKey, false) |
|---|
| | | } else if (sortKey === startKey) { |
|---|
| | | realKey = endRealKey |
|---|
| | | sortKey = endKey |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (item.sortKey != sortKey) { |
|---|
| | | item.translateX = (sortKey % basedata.columns) * 100 + '%' |
|---|
| | | item.translateY = Math.floor(sortKey / basedata.columns) * 100 + '%' |
|---|
| | | item.sortKey = sortKey |
|---|
| | | item.realKey = realKey |
|---|
| | | } |
|---|
| | | return item |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | var triggerCustomEvent = function(list, type, instance) { |
|---|
| | | if (!instance) return |
|---|
| | | var _list = [], |
|---|
| | | listData = []; |
|---|
| | | |
|---|
| | | list.forEach(function(item) { |
|---|
| | | _list[item.sortKey] = item |
|---|
| | | }) |
|---|
| | | _list.forEach(function(item) { |
|---|
| | | listData.push(item.data) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // ç¼è¯å°å°ç¨åº funcNameä½ä¸ºåæ°ä¼ é导è´äºä»¶ä¸æ§è¡ |
|---|
| | | switch(type) { |
|---|
| | | case 'change': |
|---|
| | | instance.callMethod('change', {data: listData}) |
|---|
| | | break |
|---|
| | | case 'sortEnd': |
|---|
| | | instance.callMethod('sortEnd', {data: listData}) |
|---|
| | | break |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | var listObserver = function(newVal, oldVal, ownerInstance, instance) { |
|---|
| | | var state = ownerInstance.getState() |
|---|
| | | state.itemsInstance = ownerInstance.selectAllComponents('.tn-drag__item') |
|---|
| | | |
|---|
| | | state.list = newVal || [] |
|---|
| | | |
|---|
| | | state.list.forEach(function(item, index) { |
|---|
| | | var itemInstance = state.itemsInstance[index] |
|---|
| | | if (item && itemInstance) { |
|---|
| | | itemInstance.setStyle({ |
|---|
| | | 'transform': 'translate3d('+ item.translateX + ',' + item.translateY +', 0)' |
|---|
| | | }) |
|---|
| | | if (item.fixed) itemInstance.addClass('tn-drag__fixed') |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | var baseDataObserver = function(newVal, oldVal, ownerInstance, instance) { |
|---|
| | | var state = ownerInstance.getState() |
|---|
| | | state.basedata = newVal |
|---|
| | | } |
|---|
| | | |
|---|
| | | var longPress = function(event, ownerInstance) { |
|---|
| | | var instance = event.instance |
|---|
| | | var dataset = instance.getDataset() |
|---|
| | | var state = ownerInstance.getState() |
|---|
| | | |
|---|
| | | edit = bool(dataset.edit) |
|---|
| | | if (!edit) return |
|---|
| | | if (!state.basedata || state.basedata === 'undefined') { |
|---|
| | | state.basedata = JSON.parse(dataset.basedata) |
|---|
| | | } |
|---|
| | | var basedata = state.basedata |
|---|
| | | var touches = event.changedTouches[0] |
|---|
| | | if (!touches) return |
|---|
| | | |
|---|
| | | state.current = +dataset.index |
|---|
| | | |
|---|
| | | // åå§é¡¹æ¯åºå®é¡¹åè¿å |
|---|
| | | var item = state.list[state.current] |
|---|
| | | if (item && item.fixed) return |
|---|
| | | |
|---|
| | | // å¦æå·²ç»å¨ drag ä¸åè¿å, é²æ¢å¤æ触å drag å¨ä½, touchstart äºä»¶ä¸æææ |
|---|
| | | if (state.dragging) return |
|---|
| | | |
|---|
| | | ownerInstance.callMethod("drag", { |
|---|
| | | dragging: true |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 计ç®X, Yè½´åå§ä½ç§»ï¼ä½¿itemä¸å¿ç§»å¨å°ç¹å»å¤ï¼ååçæ¶åXè½´åå§ä¸åä½ç§» |
|---|
| | | state.translateX = basedata.columns === 1 ? 0 : touches.pageX - (basedata.itemWidth / 2 + basedata.left) |
|---|
| | | state.translateY = touches.pageY - (basedata.itemHeight / 2 + basedata.top) |
|---|
| | | state.touchId = touches.identifier |
|---|
| | | |
|---|
| | | instance.setStyle({ |
|---|
| | | 'transform': 'translate3d(' + state.translateX + 'px,' + state.translateY +'px, 0)' |
|---|
| | | }) |
|---|
| | | state.itemsInstance.forEach(function(item, index) { |
|---|
| | | item.removeClass("tn-drag__transition").removeClass("tn-drag__current") |
|---|
| | | item.addClass(index === state.current ? "tn-drag__current" : "tn-drag__transition") |
|---|
| | | }) |
|---|
| | | |
|---|
| | | ownerInstance.callMethod("vibrate") |
|---|
| | | state.dragging = true |
|---|
| | | } |
|---|
| | | |
|---|
| | | var touchStart = function(event, ownerInstance) { |
|---|
| | | var instance = event.instance |
|---|
| | | var dataset = instance.getDataset() |
|---|
| | | edit = bool(dataset.edit) |
|---|
| | | } |
|---|
| | | |
|---|
| | | var touchMove = function(event, ownerInstance) { |
|---|
| | | var instance = event.instance |
|---|
| | | var dataset = instance.getDataset() |
|---|
| | | var state = ownerInstance.getState() |
|---|
| | | var basedata = state.basedata |
|---|
| | | |
|---|
| | | if (!state.dragging || !edit) return |
|---|
| | | var touches = event.changedTouches[0] |
|---|
| | | if (!touches) return |
|---|
| | | |
|---|
| | | // å¦æä¸æ¯åä¸ä¸ªè§¦åç¹åè¿å |
|---|
| | | if (state.touchId !== touches.identifier) return |
|---|
| | | |
|---|
| | | // 计ç®X,Yè½´ä½ç§», ååæ¶åXè½´åå§ä¸åä½ç§» |
|---|
| | | var translateX = basedata.columns === 1 ? 0 : touches.pageX - (basedata.itemWidth / 2 + basedata.left) |
|---|
| | | var translateY = touches.pageY - (basedata.itemHeight / 2 + basedata.top) |
|---|
| | | |
|---|
| | | // å°é¡¶å°ä½èªå¨æ»å¨ |
|---|
| | | if (touches.clientY > basedata.windowHeight - basedata.itemHeight - basedata.realBottomSize) { |
|---|
| | | // å½å触æ¸ç¹pageY + itemé«åº¦ - (å±å¹é«åº¦ - åºé¨åºå®åºåé«åº¦) |
|---|
| | | ownerInstance.callMethod('pageScroll', { |
|---|
| | | scrollTop: touches.pageY + basedata.itemHeight - (basedata.windowHeight - basedata.realBottomSize) |
|---|
| | | }) |
|---|
| | | } else if (touches.clientY < basedata.itemHeight + basedata.realTopSize) { |
|---|
| | | // å½å触æ¸ç¹pageY - itemé«åº¦ - 顶é¨åºå®åºåé« |
|---|
| | | ownerInstance.callMethod('pageScroll', { |
|---|
| | | scrollTop: touches.pageY - basedata.itemHeight - basedata.realTopSize |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 设置å½åæ¿æ´»å
ç´ çå移é |
|---|
| | | instance.setStyle({ |
|---|
| | | 'transform': 'translate3d('+ translateX + 'px,' + translateY + 'px, 0)' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | var startKey = state.list[state.current].sortKey |
|---|
| | | var currentX = Math.round(translateX / basedata.itemWidth) |
|---|
| | | var currentY = Math.round(translateY / basedata.itemHeight) |
|---|
| | | var endKey = currentX + basedata.columns * currentY |
|---|
| | | |
|---|
| | | // ç®æ 项æ¶åºå®é¡¹åè¿å |
|---|
| | | var item = state.list[endKey] |
|---|
| | | if (item && item.fixed) return |
|---|
| | | |
|---|
| | | // Xè½´æè
Yè½´è¶
åºèå´åè¿å |
|---|
| | | if (isOutRange(currentX, basedata.columns, currentY, basedata.rows, endKey, state.list.length)) return |
|---|
| | | |
|---|
| | | // é²æ¢ææ½è¿ç¨ä¸åçä¹±åºé®é¢ |
|---|
| | | if (startKey === endKey || startKey === state.preStartKey) return |
|---|
| | | state.preStartKey = startKey |
|---|
| | | |
|---|
| | | var list = sortCore(startKey, endKey, state) |
|---|
| | | state.itemsInstance.forEach(function(itemInstance, index) { |
|---|
| | | var item = list[index] |
|---|
| | | if (index !== state.current) { |
|---|
| | | itemInstance.setStyle({ |
|---|
| | | 'transform': 'translate3d('+ item.translateX + ',' + item.translateY +', 0)' |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // ownerInstance.callMethod('vibrate') |
|---|
| | | ownerInstance.callMethod('listDataChange', { |
|---|
| | | data: list |
|---|
| | | }) |
|---|
| | | triggerCustomEvent(list, "change", ownerInstance) |
|---|
| | | } |
|---|
| | | |
|---|
| | | var touchEnd = function(event, ownerInstance) { |
|---|
| | | var instance = event.instance |
|---|
| | | var dataset = instance.getDataset() |
|---|
| | | var state = ownerInstance.getState() |
|---|
| | | var basedata = state.basedata |
|---|
| | | |
|---|
| | | if (!state.dragging || !edit) return |
|---|
| | | triggerCustomEvent(state.list, "sortEnd", ownerInstance) |
|---|
| | | |
|---|
| | | instance.addClass('tn-drag__transition') |
|---|
| | | instance.setStyle({ |
|---|
| | | 'transform': 'translate3d('+ state.list[state.current].translateX + ',' + state.list[state.current].translateY + ', 0)' |
|---|
| | | }) |
|---|
| | | state.itemsInstance.forEach(function(item, index) { |
|---|
| | | item.removeClass('tn-drag__transition') |
|---|
| | | }) |
|---|
| | | |
|---|
| | | state.preStartKey = -1 |
|---|
| | | state.dragging = false |
|---|
| | | ownerInstance.callMethod('drag', { |
|---|
| | | dragging: false |
|---|
| | | }) |
|---|
| | | state.current = -1 |
|---|
| | | state.translateX = 0 |
|---|
| | | state.translateY = 0 |
|---|
| | | } |
|---|
| | | |
|---|
| | | module.exports = { |
|---|
| | | longPress: longPress, |
|---|
| | | touchStart: touchStart, |
|---|
| | | touchMove: touchMove, |
|---|
| | | touchEnd: touchEnd, |
|---|
| | | baseDataObserver: baseDataObserver, |
|---|
| | | listObserver: listObserver |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="tn-drag-class tn-drag" |
|---|
| | | :style="{ |
|---|
| | | height: wrapHeight + 'rpx' |
|---|
| | | }" |
|---|
| | | :list="listData" |
|---|
| | | :basedata="baseData" |
|---|
| | | :change:list="wxs.listObserver" |
|---|
| | | :change:basedata="wxs.baseDataObserver" |
|---|
| | | > |
|---|
| | | <!-- #ifdef MP-WEIXIN --> |
|---|
| | | <view |
|---|
| | | v-for="(item, index) in listData" |
|---|
| | | :key="item.id" |
|---|
| | | class="tn-drag__item" |
|---|
| | | :style="{ |
|---|
| | | width: 100 / columns + '%', |
|---|
| | | height: itemHeight + 'rpx' |
|---|
| | | }" |
|---|
| | | :data-index="index" |
|---|
| | | :data-basedata="baseData" |
|---|
| | | :data-edit="edit" |
|---|
| | | @longpress="wxs.longPress" |
|---|
| | | @touchstart="wxs.touchStart" |
|---|
| | | :catch:touchmove="dragging?wxs.touchMove:''" |
|---|
| | | :catch:touchend="dragging?wxs.touchEnd:''" |
|---|
| | | > |
|---|
| | | <slot :entity="item.data" :fixed="item.fixed" :index="index" :height="itemHeight" :isEdit="edit"></slot> |
|---|
| | | </view> |
|---|
| | | <!-- #endif --> |
|---|
| | | |
|---|
| | | <!-- #ifndef MP-WEIXIN --> |
|---|
| | | <view |
|---|
| | | v-for="(item, index) in listData" |
|---|
| | | :key="item.id" |
|---|
| | | class="tn-drag__item" |
|---|
| | | :style="{ |
|---|
| | | width: 100 / columns + '%', |
|---|
| | | height: itemHeight + 'rpx' |
|---|
| | | }" |
|---|
| | | @longpress="wxs.longPress" |
|---|
| | | :data-index="index" |
|---|
| | | :data-basedata="baseData" |
|---|
| | | :data-edit="edit" |
|---|
| | | @touchstart="wxs.touchStart" |
|---|
| | | @touchmove="wxs.touchMove" |
|---|
| | | @touchend="wxs.touchEnd" |
|---|
| | | > |
|---|
| | | <slot :entity="item.data" :fixed="item.fixed" :index="index" :height="itemHeight" :isEdit="edit"></slot> |
|---|
| | | </view> |
|---|
| | | <!-- #endif --> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | <script src="./index.wxs" lang="wxs" module="wxs"></script> |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'tn-drag', |
|---|
| | | props: { |
|---|
| | | // æ°æ®æº |
|---|
| | | // å¦æå±æ§ä¸å
å«fixedï¼åæ è¯å½åæ°æ®ä¸å
许æå¨ |
|---|
| | | list: { |
|---|
| | | type: Array, |
|---|
| | | default () { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ¯å¦å
许æå¨ç¼è¾ |
|---|
| | | edit: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // åæ° |
|---|
| | | columns: { |
|---|
| | | type: Number, |
|---|
| | | default: 3 |
|---|
| | | }, |
|---|
| | | // itemå
ç´ é«åº¦, åä½rpx |
|---|
| | | itemHeight: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // å½åç¶å
ç´ æ»å¨çé«åº¦ |
|---|
| | | scrollTop: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | wrapHeight() { |
|---|
| | | return this.rows * this.itemHeight |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // æªæ¸²æåèç¹æ°æ® |
|---|
| | | baseData: {}, |
|---|
| | | // æå¨åçæ°æ® |
|---|
| | | dragData: [], |
|---|
| | | // è¡æ° |
|---|
| | | rows: 0, |
|---|
| | | // 渲ææ°æ® |
|---|
| | | listData: [], |
|---|
| | | // æ è®°æ¯å¦æ£å¨æå¨ |
|---|
| | | dragging: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | list(val) { |
|---|
| | | this.listData = [] |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.init() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | columns(val) { |
|---|
| | | this.listData = [] |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.init() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.init() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // åå§å |
|---|
| | | init() { |
|---|
| | | this.dragging = true |
|---|
| | | const initDragItem = item => { |
|---|
| | | const obj = { |
|---|
| | | ...item |
|---|
| | | } |
|---|
| | | const fixed = obj?.fixed || false |
|---|
| | | delete obj["fixed"] |
|---|
| | | return { |
|---|
| | | id: this.unique(), |
|---|
| | | fixed, |
|---|
| | | data: { |
|---|
| | | ...obj |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | let i = 0 |
|---|
| | | const listData = (this.list || []).map((item, index) => { |
|---|
| | | let listItem = initDragItem(item) |
|---|
| | | // çå®æåº |
|---|
| | | listItem.realKey = i++ |
|---|
| | | // æ´ä½æåº |
|---|
| | | listItem.sortKey = index |
|---|
| | | listItem.translateX = `${(listItem.sortKey % this.columns) * 100}%` |
|---|
| | | listItem.translateY = `${Math.floor(listItem.sortKey / this.columns) * 100}%` |
|---|
| | | return listItem |
|---|
| | | }) |
|---|
| | | this.rows = Math.ceil(listData.length / this.columns) |
|---|
| | | this.listData = listData |
|---|
| | | this.dragData = listData |
|---|
| | | |
|---|
| | | if (listData.length === 0) return |
|---|
| | | // console.log(listData); |
|---|
| | | |
|---|
| | | // åå§ådomå
ç´ |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.initRect() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // åå§ådomå
ç´ |
|---|
| | | initRect() { |
|---|
| | | const { |
|---|
| | | windowWidth, |
|---|
| | | windowHeight |
|---|
| | | } = uni.getSystemInfoSync() |
|---|
| | | |
|---|
| | | let baseData = {} |
|---|
| | | baseData.windowHeight = windowHeight |
|---|
| | | baseData.realTopSize = 0 |
|---|
| | | baseData.realBottomSize = 0 |
|---|
| | | baseData.columns = this.columns |
|---|
| | | baseData.rows = this.rows |
|---|
| | | |
|---|
| | | const query = uni.createSelectorQuery().in(this) |
|---|
| | | query.select('.tn-drag').boundingClientRect() |
|---|
| | | query.select('.tn-drag__item').boundingClientRect() |
|---|
| | | query.exec(res => { |
|---|
| | | if (!res) { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.initRect() |
|---|
| | | }, 10) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | baseData.itemWidth = res[1].width |
|---|
| | | baseData.itemHeight = res[1].height |
|---|
| | | baseData.left = res[0].left |
|---|
| | | baseData.top = res[0].top + this.scrollTop |
|---|
| | | this.dragging = false |
|---|
| | | this.baseData = baseData |
|---|
| | | }) |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 触åéå¨ |
|---|
| | | vibrate() { |
|---|
| | | uni.vibrateShort() |
|---|
| | | }, |
|---|
| | | // æ»å¨å°æå®çä½ç½® |
|---|
| | | pageScroll(e) { |
|---|
| | | uni.pageScrollTo({ |
|---|
| | | scrollTop: e.scrollTop, |
|---|
| | | duration: 0 |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // ä¿®æ¹æå¨ç¶æ |
|---|
| | | drag(e) { |
|---|
| | | this.dragging = e.dragging |
|---|
| | | }, |
|---|
| | | // ææ½æ°æ®åçæ¹å |
|---|
| | | listDataChange(e) { |
|---|
| | | this.dragData = e.data |
|---|
| | | }, |
|---|
| | | // item被ç¹å» |
|---|
| | | itemClick(index) { |
|---|
| | | const item = this.dragData[index] |
|---|
| | | this.$emit('click', { |
|---|
| | | key: item.realKey, |
|---|
| | | data: item.data |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // ææ½ç»æäºä»¶ |
|---|
| | | sortEnd(e) { |
|---|
| | | this.$emit('end', { |
|---|
| | | data: e.data |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // æåºåçæ¹åäºä»¶ |
|---|
| | | change(e) { |
|---|
| | | this.$emit('change', { |
|---|
| | | data: e.data |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // çæå
ç´ å¯ä¸id |
|---|
| | | unique(n = 6) { |
|---|
| | | let id = '' |
|---|
| | | for (let i = 0; i < n; i++) id += Math.floor(Math.random() * 10) |
|---|
| | | return 'tn_' + new Date().getTime() + id |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .tn-drag { |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | position: absolute; |
|---|
| | | z-index: 2; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__transition { |
|---|
| | | transition: transform 0.25s !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__current { |
|---|
| | | z-index: 10 !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__fixed { |
|---|
| | | z-index: 1 !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view v-if="show" class="tn-empty-class tn-empty" :style="[emptyStyle]"> |
|---|
| | | <view |
|---|
| | | v-if="!isImage" |
|---|
| | | class="tn-empty__icon" |
|---|
| | | :class="[icon ? `tn-icon-${icon}` : `tn-icon-empty-${mode}`]" |
|---|
| | | :style="[iconStyle]" |
|---|
| | | ></view> |
|---|
| | | <image |
|---|
| | | v-else |
|---|
| | | class="tn-empty__image" |
|---|
| | | :style="[imageStyle]" |
|---|
| | | :src="icon" |
|---|
| | | mode="widthFix" |
|---|
| | | ></image> |
|---|
| | | |
|---|
| | | <view |
|---|
| | | class="tn-empty__text" |
|---|
| | | :style="[textStyle]" |
|---|
| | | >{{ text ? text : icons[mode]}}</view> |
|---|
| | | <view v-if="$slots.default || $slots.$default" class="tn-empty__slot"> |
|---|
| | | <slot/> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'tn-empty', |
|---|
| | | props: { |
|---|
| | | // æ¾ç¤ºç©ºç½é¡µ |
|---|
| | | show: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // å
ç½®iconçå称 |
|---|
| | | // å¾çè·¯å¾ï¼å»ºè®®ä½¿ç¨ç»å¯¹è·¯å¾ |
|---|
| | | icon: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // é¢ç½®å¾æ ç±»å |
|---|
| | | mode: { |
|---|
| | | type: String, |
|---|
| | | default: 'data' |
|---|
| | | }, |
|---|
| | | // æ示æå |
|---|
| | | text: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // æåé¢è² |
|---|
| | | textColor: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // æå大å°ï¼åä½rpx |
|---|
| | | textSize: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // å¾æ é¢è² |
|---|
| | | iconColor: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // å¾æ 大å°ï¼åä½rpx |
|---|
| | | iconSize: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // å¾ç宽度ï¼å½å¾æ 为å¾çæ¶çæï¼ï¼åä½rpx |
|---|
| | | imgWidth: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // å¾çé«åº¦ï¼å½å¾æ 为å¾çæ¶çæï¼ï¼åä½rpx |
|---|
| | | imgHeight: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // èªå®ä¹ç»ä»¶æ ·å¼ |
|---|
| | | customStyle: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | emptyStyle() { |
|---|
| | | let style = {} |
|---|
| | | Object.assign(style, this.customStyle) |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | iconStyle() { |
|---|
| | | let style = {} |
|---|
| | | if (this.iconSize) { |
|---|
| | | style.fontSize = this.iconSize + 'rpx' |
|---|
| | | } |
|---|
| | | if (this.iconColor) { |
|---|
| | | style.color = this.iconColor |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | imageStyle() { |
|---|
| | | let style = {} |
|---|
| | | if (this.imgWidth) { |
|---|
| | | style.width = this.imgWidth + 'rpx' |
|---|
| | | } |
|---|
| | | if (this.imgHeight) { |
|---|
| | | style.height = this.imgHeight + 'rpx' |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | textStyle() { |
|---|
| | | let style = {} |
|---|
| | | if (this.textColor) { |
|---|
| | | style.color = this.textColor |
|---|
| | | } |
|---|
| | | if (this.textSize) { |
|---|
| | | style.fontSize = this.textSize + 'rpx' |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | // å¤æä¼ éçiconæ¯å¦ä¸ºå¾ç |
|---|
| | | isImage() { |
|---|
| | | return this.icon.indexOf('/') >= 0 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | icons: { |
|---|
| | | cart: 'è´ç©è½¦ä¸ºç©º', |
|---|
| | | page: '页é¢ä¸åå¨', |
|---|
| | | search: 'æç´¢ç»æ为空', |
|---|
| | | address: 'å°å为空', |
|---|
| | | network: 'ç½ç»ä¸é', |
|---|
| | | order: '订å为空', |
|---|
| | | coupon: 'ä¼æ å¸ä¸ºç©º', |
|---|
| | | favor: 'ææ æ¶è', |
|---|
| | | permission: 'æ æé', |
|---|
| | | history: 'åå²è®°å½ä¸ºç©º', |
|---|
| | | message: 'ææ æ¶æ¯', |
|---|
| | | list: 'å表为空', |
|---|
| | | data: 'ææ æ°æ®', |
|---|
| | | comment: 'ææ è¯è®º' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .tn-empty { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | |
|---|
| | | &__icon { |
|---|
| | | margin-top: 14rpx; |
|---|
| | | color: #AAAAAA; |
|---|
| | | font-size: 90rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__image { |
|---|
| | | width: 160rpx; |
|---|
| | | height: 160rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | margin-top: 20rpx; |
|---|
| | | color: #AAAAAA; |
|---|
| | | font-size: 30rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__slot { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | margin-top: 20rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="tn-fab-class tn-fab" @touchmove.stop.prevent> |
|---|
| | | <view |
|---|
| | | class="tn-fab__box" |
|---|
| | | :class="{'tn-fab--right': left === 'auto'}" |
|---|
| | | :style="{ |
|---|
| | | left: $t.string.getLengthUnitValue(fabLeft || left), |
|---|
| | | right: $t.string.getLengthUnitValue(fabRight || right), |
|---|
| | | bottom: $t.string.getLengthUnitValue(fabBottom || bottom), |
|---|
| | | zIndex: elZIndex |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | v-if="visibleSync" |
|---|
| | | class="tn-fab__btns" |
|---|
| | | :class="[`tn-fab__btns__animation--${animationType}`, |
|---|
| | | showFab ? `tn-fab__btns--visible--${animationType}` : '' |
|---|
| | | ]" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | v-for="(item, index) in btnList" |
|---|
| | | :key="index" |
|---|
| | | class="tn-fab__item" |
|---|
| | | :class="[ |
|---|
| | | `tn-fab__item__animation--${animationType}`, |
|---|
| | | {'tn-fab__item--left': right === 'auto'} |
|---|
| | | ]" |
|---|
| | | :style="[fabItemStyle(index)]" |
|---|
| | | @tap.stop="handleClick(index)" |
|---|
| | | > |
|---|
| | | <!-- 带å¾æ æè
å¾çæ¶æ¾ç¤ºçæåä¿¡æ¯ --> |
|---|
| | | <view |
|---|
| | | v-if="animationType !== 'around' && (item.imgUrl || item.icon)" |
|---|
| | | :class="[left === 'auto' ? 'tn-fab__item__text--right' : 'tn-fab__item__text--left']" |
|---|
| | | :style="{ |
|---|
| | | color: item.textColor || '#FFF', |
|---|
| | | fontSize: $t.string.getLengthUnitValue(item.textSize || 28) |
|---|
| | | }" |
|---|
| | | >{{ item.text || '' }}</view> |
|---|
| | | |
|---|
| | | <!-- 带å¾çæè
å¾æ æ¶çå¾çãå¾æ ä¿¡æ¯ --> |
|---|
| | | <view |
|---|
| | | class="tn-fab__item__btn" |
|---|
| | | :class="[!item.bgColor ? backgroundColorClass : '']" |
|---|
| | | :style="{ |
|---|
| | | width: $t.string.getLengthUnitValue(width), |
|---|
| | | height: $t.string.getLengthUnitValue(height), |
|---|
| | | lineHeight: $t.string.getLengthUnitValue(height), |
|---|
| | | backgroundColor: item.bgColor || backgroundColorStyle || '#01BEFF', |
|---|
| | | borderRadius: $t.string.getLengthUnitValue(radius) |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <!-- æ å¾çåæ å¾æ æ¶åªæ¾ç¤ºæå --> |
|---|
| | | <view |
|---|
| | | v-if="!item.imgUrl && !item.icon" |
|---|
| | | class="tn-fab__item__btn__title" |
|---|
| | | :style="{ |
|---|
| | | color: item.textColor || '#fff', |
|---|
| | | fontSize: $t.string.getLengthUnitValue(item.textSize || 28) |
|---|
| | | }" |
|---|
| | | >{{ item.text || '' }}</view> |
|---|
| | | <!-- å¾æ --> |
|---|
| | | <view |
|---|
| | | v-if="item.icon" |
|---|
| | | class="tn-fab__item__btn__icon" |
|---|
| | | :class="[`tn-icon-${item.icon}`]" |
|---|
| | | :style="{ |
|---|
| | | color: item.iconColor || '#fff', |
|---|
| | | fontSize: $t.string.getLengthUnitValue(item.iconSize || iconSize || 64) |
|---|
| | | }" |
|---|
| | | ></view> |
|---|
| | | <!-- å¾ç --> |
|---|
| | | <image |
|---|
| | | v-else-if="!item.icon && item.imgUrl" |
|---|
| | | class="tn-fab__item__btn__image" |
|---|
| | | :style="{ |
|---|
| | | width: $t.string.getLengthUnitValue(item.imgWidth || 64), |
|---|
| | | height: $t.string.getLengthUnitValue(item.imgHeight || 64), |
|---|
| | | }" |
|---|
| | | :src="item.imgUrl" |
|---|
| | | ></image> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <view |
|---|
| | | class="tn-fab__item__btn tn-fab__item__btn--fab" |
|---|
| | | :class="[backgroundColorClass, fontColorClass, {'tn-fab__item__btn--active': showFab}]" |
|---|
| | | :style="{ |
|---|
| | | width: $t.string.getLengthUnitValue(width), |
|---|
| | | height: $t.string.getLengthUnitValue(height), |
|---|
| | | backgroundColor: backgroundColorStyle || !backgroundColorClass ? '#01BEFF' : '', |
|---|
| | | color: fontColorStyle || '#fff', |
|---|
| | | borderRadius: $t.string.getLengthUnitValue(radius), |
|---|
| | | zIndex: elZIndex - 1 |
|---|
| | | }" |
|---|
| | | @tap.stop="fabClick" |
|---|
| | | > |
|---|
| | | <slot> |
|---|
| | | <view class="tn-fab__item__btn__icon" :class="[`tn-icon-${icon}`]" :style="{fontSize: $t.string.getLengthUnitValue(iconSize || 64)}"></view> |
|---|
| | | </slot> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="visibleSync && showMask" class="tn-fab__mask" :class="{'tn-fab__mask--visible': showFab}" :style="{zIndex: elZIndex - 3}" @tap="clickMask()"></view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import componentsColorMixin from '../../libs/mixin/components_color.js' |
|---|
| | | export default { |
|---|
| | | name: 'tn-fab', |
|---|
| | | mixins: [componentsColorMixin], |
|---|
| | | props: { |
|---|
| | | // æé®å表 |
|---|
| | | // { |
|---|
| | | // // èæ¯é¢è² |
|---|
| | | // bgColor: '#fff', |
|---|
| | | // // å¾çå°å |
|---|
| | | // imgUrl: '', |
|---|
| | | // // å¾ç宽度 |
|---|
| | | // imgWidth: 60, |
|---|
| | | // // å¾çé«åº¦ |
|---|
| | | // imgHeight: 60, |
|---|
| | | // // å¾æ å称 |
|---|
| | | // icon: '', |
|---|
| | | // // å¾æ 尺寸 |
|---|
| | | // iconSize: 60, |
|---|
| | | // // å¾æ é¢è² |
|---|
| | | // iconColor: '#fff', |
|---|
| | | // // æ示æå |
|---|
| | | // text: '', |
|---|
| | | // // æåå¤§å° |
|---|
| | | // textSize: 30, |
|---|
| | | // // åä½é¢è² |
|---|
| | | // textColor: '#fff' |
|---|
| | | // } |
|---|
| | | btnList: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // èªå®ä¹æ¬æµ®æé®å
容 |
|---|
| | | customBtn: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // æ¬æµ®æé®ç宽度 |
|---|
| | | width: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: 88 |
|---|
| | | }, |
|---|
| | | // æ¬æµ®æé®çé«åº¦ |
|---|
| | | height: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: 88 |
|---|
| | | }, |
|---|
| | | // å¾æ å¤§å° |
|---|
| | | iconSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: 64 |
|---|
| | | }, |
|---|
| | | // å¾æ å称 |
|---|
| | | icon: { |
|---|
| | | type: String, |
|---|
| | | default: 'open' |
|---|
| | | }, |
|---|
| | | // æé®åè§ |
|---|
| | | radius: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: '50%' |
|---|
| | | }, |
|---|
| | | // æé®è·ç¦»å·¦è¾¹çä½ç½® |
|---|
| | | left: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: 'auto' |
|---|
| | | }, |
|---|
| | | // æé®è·ç¦»å³è¾¹çä½ç½® |
|---|
| | | right: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: 'auto' |
|---|
| | | }, |
|---|
| | | // æé®è·ç¦»åºé¨çä½ç½® |
|---|
| | | bottom: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: 100 |
|---|
| | | }, |
|---|
| | | // å±ç¤ºå¨ç»ç±»å up å¾ä¸å±ç¤º around ç¯ç» |
|---|
| | | animationType: { |
|---|
| | | type: String, |
|---|
| | | default: 'up' |
|---|
| | | }, |
|---|
| | | // å½å¨ç»ä¸ºåç¯æ¶ï¼æ¯ä¸ªå¼¹åºæé®ä¹é´çè·ç¦», åä½px |
|---|
| | | aroundBtnDistance: { |
|---|
| | | type: Number, |
|---|
| | | default: 10 |
|---|
| | | }, |
|---|
| | | zIndex: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // æ¾ç¤ºé®ç½© |
|---|
| | | showMask: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // ç¹å»é®ç½©æ¯å¦å¯ä»¥å
³é |
|---|
| | | maskCloseable: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | showFab: false, |
|---|
| | | visibleSync: false, |
|---|
| | | timer: null, |
|---|
| | | fabLeft: 0, |
|---|
| | | fabRight: 0, |
|---|
| | | fabBottom: 0, |
|---|
| | | fabBtnInfo: { |
|---|
| | | width: 0, |
|---|
| | | height: 0, |
|---|
| | | left: 0, |
|---|
| | | right: 0, |
|---|
| | | bottom: 0 |
|---|
| | | }, |
|---|
| | | systemInfo: { |
|---|
| | | width: 0, |
|---|
| | | height: 0 |
|---|
| | | }, |
|---|
| | | updateProps: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | elZIndex() { |
|---|
| | | return this.zIndex || this.$t.zIndex.fab |
|---|
| | | }, |
|---|
| | | propsData() { |
|---|
| | | return [this.width, this.height, this.left, this.right, this.bottom] |
|---|
| | | }, |
|---|
| | | fabItemStyle() { |
|---|
| | | return (index) => { |
|---|
| | | let style = { |
|---|
| | | zIndex: this.elZIndex - 2 |
|---|
| | | } |
|---|
| | | if (this.animationType === 'up' || !this.showFab) { |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | let base = 1 |
|---|
| | | if (this.left === 'auto') { |
|---|
| | | base = 1 |
|---|
| | | } else if (this.right === 'auto') { |
|---|
| | | base = -1 |
|---|
| | | } |
|---|
| | | style.transform = `rotate(${base * index * 60}deg) translateX(${(this.aroundBtnDistance + this.fabBtnInfo.width) * (-(base))}px)` |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | propsData() { |
|---|
| | | // æ´æ°æé®ä¿¡æ¯ |
|---|
| | | this.updateProps = true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.getFabBtnRectInfo() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | beforeDestroy() { |
|---|
| | | if (this.timer) { |
|---|
| | | clearTimeout(this.timer) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // æé®ç¹å»äºä»¶ |
|---|
| | | handleClick(index) { |
|---|
| | | this.close() |
|---|
| | | this.$emit('click', {index: index}) |
|---|
| | | }, |
|---|
| | | // ç¹å»æ¬æµ®æé® |
|---|
| | | fabClick() { |
|---|
| | | if (this.showFab) { |
|---|
| | | this.close() |
|---|
| | | } else { |
|---|
| | | // console.log(this.visibleSync); |
|---|
| | | if (this.visibleSync) { |
|---|
| | | this.visibleSync = false |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.open() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // ç¹å»é®ç½© |
|---|
| | | clickMask() { |
|---|
| | | if (!this.showMask || !this.maskCloseable) return |
|---|
| | | this.close() |
|---|
| | | }, |
|---|
| | | |
|---|
| | | open() { |
|---|
| | | this.change('visibleSync', 'showFab', true) |
|---|
| | | this.translateFabPosition() |
|---|
| | | }, |
|---|
| | | close() { |
|---|
| | | this.change('showFab', 'visibleSync', false) |
|---|
| | | this.fabLeft = 0 |
|---|
| | | this.fabRight = 0 |
|---|
| | | this.fabBottom = 0 |
|---|
| | | }, |
|---|
| | | // å
³éæ¶å
éè¿å¨ç»éèå¼¹çªåé®ç½©ï¼å移é¤æ´ä¸ªç»ä»¶ |
|---|
| | | // æå¼æ¶ï¼å
渲æç»ä»¶ï¼å»¶æ¶ä¸å®æ¶é´å让é®ç½©åå¼¹çªçå¨ç»èµ·ä½ç¨ |
|---|
| | | change(param1, param2, status) { |
|---|
| | | this[param1] = status |
|---|
| | | if (status) { |
|---|
| | | // #ifdef H5 || MP |
|---|
| | | this.timer = setTimeout(() => { |
|---|
| | | this[param2] = status |
|---|
| | | this.$emit(status ? 'open' : 'close') |
|---|
| | | clearTimeout(this.timer) |
|---|
| | | }, 10) |
|---|
| | | // #endif |
|---|
| | | // #ifndef H5 || MP |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this[param2] = status |
|---|
| | | this.$emit(status ? 'open' : 'close') |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | } else { |
|---|
| | | this.timer = setTimeout(() => { |
|---|
| | | this[param2] = status |
|---|
| | | this.$emit(status ? 'open' : 'close') |
|---|
| | | clearTimeout(this.timer) |
|---|
| | | }, 250) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /******************** æ转å¨ç»ç¸å
³å½æ° ********************/ |
|---|
| | | // è·åæé®çä¿¡æ¯ |
|---|
| | | async getFabBtnRectInfo() { |
|---|
| | | const systemInfo = uni.getSystemInfoSync() |
|---|
| | | const btnRectInfo = await this._tGetRect('.tn-fab__item__btn--fab') |
|---|
| | | if (!btnRectInfo) { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.getFabBtnRectInfo() |
|---|
| | | }, 10) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | console.log(btnRectInfo); |
|---|
| | | this.systemInfo = { |
|---|
| | | width: systemInfo.windowWidth, |
|---|
| | | height: systemInfo.windowHeight |
|---|
| | | } |
|---|
| | | this.fabBtnInfo.width = btnRectInfo.width |
|---|
| | | this.fabBtnInfo.height = btnRectInfo.height |
|---|
| | | this.fabBtnInfo.left = btnRectInfo.left |
|---|
| | | this.fabBtnInfo.right = btnRectInfo.right |
|---|
| | | this.fabBtnInfo.bottom = btnRectInfo.bottom |
|---|
| | | }, |
|---|
| | | // æ´æ°æ¬æµ®æé®çä½ç½® |
|---|
| | | translateFabPosition() { |
|---|
| | | if (this.updateProps) { |
|---|
| | | this.getFabBtnRectInfo() |
|---|
| | | this.updateProps = false |
|---|
| | | } |
|---|
| | | if (this.animationType === 'up') return |
|---|
| | | // æé®ç»ç宽度 |
|---|
| | | const btnGroupWidth = this.fabBtnInfo.width + this.aroundBtnDistance + 10 |
|---|
| | | // å¤æå½åæé®æ¯å¨å·¦è¾¹è¿æ¯å³è¾¹ |
|---|
| | | if (this.left === 'auto' && btnGroupWidth > this.systemInfo.width - this.fabBtnInfo.right) { |
|---|
| | | // è·ç¦»ä¸å¤éè¦ç§»å¨ |
|---|
| | | this.fabRight = btnGroupWidth + 'px' |
|---|
| | | } else if (this.right === 'auto' && btnGroupWidth > this.fabBtnInfo.left) { |
|---|
| | | this.fabLeft = btnGroupWidth + 'px' |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (btnGroupWidth > this.systemInfo.height - this.fabBtnInfo.bottom) { |
|---|
| | | this.fabBottom = btnGroupWidth + 'px' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | |
|---|
| | | .tn-fab { |
|---|
| | | &__box { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: flex-start; |
|---|
| | | flex-direction: column; |
|---|
| | | position: fixed; |
|---|
| | | transition: all 0.25s ease-in-out; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--right { |
|---|
| | | align-items: flex-end; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__btns { |
|---|
| | | transition: all 0.25s cubic-bezier(0,.13,0,1.43); |
|---|
| | | transform-origin: 80% bottom; |
|---|
| | | |
|---|
| | | &__animation--up { |
|---|
| | | opacity: 0; |
|---|
| | | transform: translateY(100%); |
|---|
| | | } |
|---|
| | | &__animation--around { |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--visible--up { |
|---|
| | | // visibility: visible; |
|---|
| | | opacity: 1; |
|---|
| | | transform: translateY(0); |
|---|
| | | } |
|---|
| | | &--visible--around { |
|---|
| | | // visibility: visible; |
|---|
| | | // opacity: 1; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | display: flex; |
|---|
| | | justify-content: flex-end; |
|---|
| | | align-items: center; |
|---|
| | | padding-bottom: 20rpx; |
|---|
| | | |
|---|
| | | &__animation--around { |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | transition: transform 0.25s ease-in-out; |
|---|
| | | transform-origin: 50% 50%; |
|---|
| | | padding-bottom: 0 !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--left { |
|---|
| | | flex-flow: row-reverse; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | &--left { |
|---|
| | | padding-left: 14rpx; |
|---|
| | | } |
|---|
| | | &--right { |
|---|
| | | padding-right: 14rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__btn { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | box-shadow: 0 0 5rpx 2rpx rgba(0, 0, 0, 0.07); |
|---|
| | | transition: all 0.2s linear; |
|---|
| | | |
|---|
| | | &--active { |
|---|
| | | animation-name: fab-button-animation; |
|---|
| | | animation-duration: 0.2s; |
|---|
| | | animation-timing-function: cubic-bezier(0,.13,0,1.43); |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__title { |
|---|
| | | width: 90%; |
|---|
| | | text-align: center; |
|---|
| | | white-space: nowrap; |
|---|
| | | overflow: hidden; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__icon { |
|---|
| | | text-align: center; |
|---|
| | | font-size: 64rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__image { |
|---|
| | | display: block; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__mask { |
|---|
| | | position: fixed; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | bottom: 0; |
|---|
| | | background-color: $tn-mask-bg-color; |
|---|
| | | transition: all 0.2s ease-in-out; |
|---|
| | | opacity: 0; |
|---|
| | | |
|---|
| | | &--visible { |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes fab-button-animation { |
|---|
| | | 0% { |
|---|
| | | transform: scale(0.6); |
|---|
| | | } |
|---|
| | | // 20% { |
|---|
| | | // transform: scale(1.8); |
|---|
| | | // } |
|---|
| | | // 40% { |
|---|
| | | // transform: scale(0.4); |
|---|
| | | // } |
|---|
| | | // 50% { |
|---|
| | | // transform: scale(1.4); |
|---|
| | | // } |
|---|
| | | // 80% { |
|---|
| | | // transform: scale(0.8); |
|---|
| | | // } |
|---|
| | | 100% { |
|---|
| | | transform: scale(1); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="tn-form-item-class tn-form-item" |
|---|
| | | :class="{ |
|---|
| | | 'tn-border-solid-bottom': elBorderBottom, |
|---|
| | | 'tn-form-item__border-bottom--error': validateState === 'error' && showError('border-bottom') |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="tn-form-item__body" |
|---|
| | | :style="{ |
|---|
| | | flexDirection: elLabelPosition == 'left' ? 'row' : 'column' |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <!-- å¤ç微信å°ç¨åºä¸è®¾ç½®å±æ§çé®é¢ï¼ä¸è®¾ç½®å¼çæ¶åä¼åætrue --> |
|---|
| | | <view |
|---|
| | | class="tn-form-item--left" |
|---|
| | | :style="{ |
|---|
| | | width: wLabelWidth, |
|---|
| | | flex: `0 0 ${wLabelWidth}`, |
|---|
| | | marginBottom: elLabelPosition == 'left' ? 0 : '10rpx' |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <!-- åå¯¹é½ --> |
|---|
| | | <view v-if="required || leftIcon || label" class="tn-form-item--left__content" |
|---|
| | | :style="[leftContentStyle]" |
|---|
| | | > |
|---|
| | | <!-- nvueä¸æ¯æ伪å
ç´ before --> |
|---|
| | | <view v-if="leftIcon" class="tn-form-item--left__content__icon"> |
|---|
| | | <view :class="[`tn-icon-${leftIcon}`]" :style="leftIconStyle"></view> |
|---|
| | | </view> |
|---|
| | | <!-- <view |
|---|
| | | class="tn-form-item--left__content__label" |
|---|
| | | :style="[elLabelStyle, { |
|---|
| | | 'justify-content': elLabelAlign === 'left' ? 'flex-satrt' : elLabelAlign === 'center' ? 'center' : 'flex-end' |
|---|
| | | }]" |
|---|
| | | > |
|---|
| | | {{label}} |
|---|
| | | </view> --> |
|---|
| | | <view |
|---|
| | | class="tn-form-item--left__content__label" |
|---|
| | | :style="[elLabelStyle]" |
|---|
| | | > |
|---|
| | | {{label}} |
|---|
| | | </view> |
|---|
| | | <text v-if="required" class="tn-form-item--left__content--required">*</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <view class="tn-form-item--right tn-flex"> |
|---|
| | | <view class="tn-form-item--right__content"> |
|---|
| | | <view class="tn-form-item--right__content__slot"> |
|---|
| | | <slot></slot> |
|---|
| | | </view> |
|---|
| | | <view v-if="$slots.right || rightIcon" class="tn-form-item--right__content__icon tn-flex"> |
|---|
| | | <view v-if="rightIcon" :class="[`tn-icon-${rightIcon}`]" :style="rightIconStyle"></view> |
|---|
| | | <slot name="right"></slot> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <view |
|---|
| | | v-if="validateState === 'error' && showError('message')" |
|---|
| | | class="tn-form-item__message" |
|---|
| | | :style="{ |
|---|
| | | paddingLeft: elLabelPosition === 'left' ? elLabelWidth + 'rpx' : '0' |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | {{validateMessage}} |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import Emitter from '../../libs/utils/emitter.js' |
|---|
| | | import schema from '../../libs/utils/async-validator.js' |
|---|
| | | // å»é¤è¦åä¿¡æ¯ |
|---|
| | | schema.warning = function() {} |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | mixins: [Emitter], |
|---|
| | | name: 'tn-form-item', |
|---|
| | | inject: { |
|---|
| | | tnForm: { |
|---|
| | | default() { |
|---|
| | | return null |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | props: { |
|---|
| | | // labelæç¤ºè¯ |
|---|
| | | label: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // ç»å®çå¼ |
|---|
| | | prop: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºè¡¨ååçä¸åçº¿è¾¹æ¡ |
|---|
| | | borderBottom: { |
|---|
| | | type:Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // label(æ ç¾å称)çä½ç½® |
|---|
| | | // left - 左边 |
|---|
| | | // top - ä¸è¾¹ |
|---|
| | | labelPosition: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // labelç宽度 |
|---|
| | | labelWidth: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // labelç对é½æ¹å¼ |
|---|
| | | // left - å·¦å¯¹é½ |
|---|
| | | // top - ä¸å¯¹é½ |
|---|
| | | // right - å³å¯¹é½ |
|---|
| | | // bottom - ä¸å¯¹é½ |
|---|
| | | labelAlign: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // label çæ ·å¼ |
|---|
| | | labelStyle: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 左侧å¾æ |
|---|
| | | leftIcon: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // å³ä¾§å¾æ |
|---|
| | | rightIcon: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // 左侧å¾æ æ ·å¼ |
|---|
| | | leftIconStyle: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // å³ä¾§å¾æ æ ·å¼ |
|---|
| | | rightIconStyle: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå¿
填项ç*ï¼ä¸åæ ¡éªç¨é |
|---|
| | | required: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // å¤ç微信å°ç¨åºlabelç宽度 |
|---|
| | | wLabelWidth() { |
|---|
| | | // å¦æç¨æ·è®¾ç½®label为空å符串(微信å°ç¨åºç©ºå符串æç»ä¼åæå符串ç'true')ï¼æå³çè¦å°labelçä½ç½®å®½åº¦è®¾ç½®ä¸ºauto |
|---|
| | | return this.elLabelPosition === 'left' ? (this.label === 'true' || this.label === '' ? 'auto' : this.elLabelWidth + 'rpx') : '100%' |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºé误æ示 |
|---|
| | | showError() { |
|---|
| | | return type => { |
|---|
| | | if (this.errorType.indexOf('none') >= 0) return false |
|---|
| | | else if (this.errorType.indexOf(type) >= 0) return true |
|---|
| | | else return false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // labelç宽度(é»è®¤å¼ä¸º90) |
|---|
| | | elLabelWidth() { |
|---|
| | | return this.labelWidth != 0 ? this.labelWidth : (this.parentData.labelWidth != 0 ? this.parentData.labelWidth : 90) |
|---|
| | | }, |
|---|
| | | // labelçæ ·å¼ |
|---|
| | | elLabelStyle() { |
|---|
| | | return Object.keys(this.labelStyle).length ? this.labelStyle : (Object.keys(this.parentData.labelStyle).length ? this.parentData.labelStyle : {}) |
|---|
| | | }, |
|---|
| | | // labelæ¾ç¤ºä½ç½® |
|---|
| | | elLabelPosition() { |
|---|
| | | return this.labelPosition ? this.labelPosition : (this.parentData.labelPosition ? this.parentData.labelPosition : 'left') |
|---|
| | | }, |
|---|
| | | // label对é½æ¹å¼ |
|---|
| | | elLabelAlign() { |
|---|
| | | return this.labelAlign ? this.labelAlign : (this.parentData.labelAlign ? this.parentData.labelAlign : 'left') |
|---|
| | | }, |
|---|
| | | // labelä¸å线 |
|---|
| | | elBorderBottom() { |
|---|
| | | return this.borderBottom !== '' ? this.borderBottom : (this.parentData.borderBottom !== '' ? this.parentData.borderBottom : true) |
|---|
| | | }, |
|---|
| | | leftContentStyle() { |
|---|
| | | let style = {} |
|---|
| | | if (this.elLabelPosition === 'left') { |
|---|
| | | switch(this.elLabelAlign) { |
|---|
| | | case 'left': |
|---|
| | | style.justifyContent = 'flex-start' |
|---|
| | | break |
|---|
| | | case 'center': |
|---|
| | | style.justifyContent = 'center' |
|---|
| | | break |
|---|
| | | default: |
|---|
| | | style.justifyContent = 'flex-end' |
|---|
| | | break |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // é»è®¤å¼ |
|---|
| | | initialValue: '', |
|---|
| | | // æ¯å¦æ ¡éªæå |
|---|
| | | validateState: '', |
|---|
| | | // æ ¡éªå¤±è´¥æç¤ºä¿¡æ¯ |
|---|
| | | validateMessage: '', |
|---|
| | | // é误çæ示æ¹å¼ï¼åèformç»ä»¶ï¼ |
|---|
| | | errorType: ['message'], |
|---|
| | | // å½ååç»ä»¶è¾å
¥çå¼ |
|---|
| | | fieldValue: '', |
|---|
| | | // ç¶ç»ä»¶çåæ° |
|---|
| | | // ç±äºåcomputedä¸æ æ³å¾ç¥this.parentçååï¼æ以æ¾å¨dataä¸ |
|---|
| | | parentData: { |
|---|
| | | borderBottom: true, |
|---|
| | | labelWidth: 90, |
|---|
| | | labelPosition: 'left', |
|---|
| | | labelAlign: 'left', |
|---|
| | | labelStyle: {}, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | validateState(val) { |
|---|
| | | this.broadcastInputError() |
|---|
| | | }, |
|---|
| | | "tnForm.errorType"(val) { |
|---|
| | | this.errorType = val |
|---|
| | | this.broadcastInputError() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | // ç»ä»¶å建å®æåï¼ä¿åå½åå®ä¾å°formç»ä»¶ä¸ |
|---|
| | | // æ¯ä»å®ã头æ¡å°ç¨åºä¸æ¯æprovide/injectï¼æ以使ç¨è¿ä¸ªæ¹æ³è·åæ´ä¸ªç¶ç»ä»¶ï¼å¨createdå®ä¹ï¼é¿å
循ç¯åºç¨\ |
|---|
| | | this.parent = this.$t.$parent.call(this, 'tn-form') |
|---|
| | | if (this.parent) { |
|---|
| | | // éåparentDataå±æ§ï¼å°parentä¸ååçå±æ§èµå¼ç»parentData |
|---|
| | | Object.keys(this.parentData).map(key => { |
|---|
| | | this.parentData[key] = this.parent[key] |
|---|
| | | }) |
|---|
| | | // å¦æ没æä¼ å
¥propæè
tnForm为空ï¼åç¬ä½¿ç¨form-itemç»ä»¶çæ¶åï¼ï¼å°±ä¸è¿è¡æ ¡éª |
|---|
| | | if (this.prop) { |
|---|
| | | // å°æ¬å®ä¾æ·»å å°ç¶ç»ä»¶ä¸ |
|---|
| | | this.parent.fields.push(this) |
|---|
| | | this.errorType = this.parent.errorType |
|---|
| | | // 设置åå§å¼ |
|---|
| | | this.initialValue = this.fieldValue |
|---|
| | | // æ·»å 表åæ ¡éªï¼è¿éå¿
é¡»è¦åå¨$nextTickä¸ï¼å 为tn-formçrulesæ¯éè¿refæå¨ä¼ å
¥ç |
|---|
| | | // ä¸å¨$nextTickä¸çè¯ï¼å¯è½ä¼é ææ§è¡æ¤å¤ä»£ç æ¶ï¼ç¶ç»ä»¶è¿æ²¡éè¿refæè§åç»tn-formï¼å¯¼è´è§å为空 |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.setRules() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | beforeDestroy() { |
|---|
| | | // ç»ä»¶éæ¯åï¼å°å®ä¾ä»tn-formçç¼åä¸ç§»é¤ |
|---|
| | | // å¦æå½å没æpropçè¯è¡¨ç¤ºå½åä¸è¿è¡å é¤ |
|---|
| | | if (this.parent && this.prop) { |
|---|
| | | this.parent.fields.map((item, index) => { |
|---|
| | | if (item === this) this.parent.fields.splice(index, 1) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // åinputç»ä»¶ååºé误äºä»¶ |
|---|
| | | broadcastInputError() { |
|---|
| | | this.broadcast('tn-input', 'on-form-item-error', this.validateState === 'error' && this.showError('border')) |
|---|
| | | }, |
|---|
| | | // è®¾ç½®æ ¡éªè§å |
|---|
| | | setRules() { |
|---|
| | | let that = this |
|---|
| | | // ä»ç¶ç»ä»¶tn-formæ¿å°å½åtn-form-iteméè¦éªè¯ çè§å |
|---|
| | | // let rules = this.getRules() |
|---|
| | | // if (rules.length) { |
|---|
| | | // this.isRequired = rules.some(rule => { |
|---|
| | | // // å¦ææå¿
填项ï¼å°±è¿åï¼æ²¡æçè¯ï¼å°±æ¯undefined |
|---|
| | | // return rule.required |
|---|
| | | // }) |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // bluräºä»¶ |
|---|
| | | this.$on('on-form-blur', that.onFieldBlur) |
|---|
| | | // changeäºä»¶ |
|---|
| | | this.$on('on-form-change', that.onFieldChange) |
|---|
| | | }, |
|---|
| | | // ä»formçruleså±æ§ä¸ååºå½åform-itemçæ ¡éªè§å |
|---|
| | | getRules() { |
|---|
| | | let rules = this.parent.rules |
|---|
| | | rules = rules ? rules[this.prop] : [] |
|---|
| | | |
|---|
| | | // è¿åæ°å¼å½¢å¼çå¼ |
|---|
| | | return [].concat(rules || []) |
|---|
| | | }, |
|---|
| | | // bluräºä»¶æ¶è¿è¡è¡¨åè®¤è¯ |
|---|
| | | onFieldBlur() { |
|---|
| | | this.validation('blur') |
|---|
| | | }, |
|---|
| | | // changeäºä»¶æ¶è¿è¡è¡¨åè®¤è¯ |
|---|
| | | onFieldChange() { |
|---|
| | | this.validation('change') |
|---|
| | | }, |
|---|
| | | // è¿æ»¤åºç¬¦åè¦æ±çruleè§å |
|---|
| | | getFilterRule(triggerType = '') { |
|---|
| | | let rules = this.getRules() |
|---|
| | | // æ´ä½éªè¯è¡¨åæ¶ï¼triggerType为空å符串ï¼æ¤æ¶è¿åææè§åè¿è¡éªè¯ |
|---|
| | | if (!triggerType) return rules |
|---|
| | | // æäºåºæ¯å¯è½çå¤æè§åï¼å¯è½ä¸åå¨triggerå±æ§ï¼æ
å
å¤ææ¯å¦åå¨æ¤å±æ§ |
|---|
| | | // åéå¤æè§åæ¯å¦æ对åºçäºä»¶ï¼æ¯å¦blurï¼change触åççäºä»¶ |
|---|
| | | // 使ç¨indexOfå¤æï¼æ¯å 为æäºæ¶å设置çéªè¯è§åçtriggerå±æ§å¯è½ä¸ºå¤ä¸ªï¼æ¯å¦['blur','change'] |
|---|
| | | return rules.filter(rule => rule.trigger && rule.trigger.indexOf(triggerType) !== -1) |
|---|
| | | }, |
|---|
| | | // æ ¡éªæ°æ® |
|---|
| | | validation(trigger, callback = ()=>{}) { |
|---|
| | | // æ ¡éªä¹åå
è·åéè¦æ ¡éªçå¼ |
|---|
| | | this.fieldValue = this.parent.model[this.prop] |
|---|
| | | // bluråchangeæ¯å¦æå½åæ¹å¼çæ ¡éªè§å |
|---|
| | | let rules = this.getFilterRule(trigger) |
|---|
| | | // å¤ææ¯å¦æéªè¯è§åï¼å¦æ没æè§åï¼ä¹è°ç¨åè°æ¹æ³ï¼å¦åç¶ç»ä»¶tn-formä¼å 为 |
|---|
| | | // 对countåéçç»è®¡é误èæ æ³è¿å
¥ä¸ä¸å±çåè° |
|---|
| | | if (!rules || rules.length === 0) { |
|---|
| | | return callback('') |
|---|
| | | } |
|---|
| | | // 设置å½åä¸ºæ ¡éªä¸ |
|---|
| | | this.validateState = 'validating' |
|---|
| | | // è°ç¨async-validatorçæ¹æ³ |
|---|
| | | let validator = new schema({ |
|---|
| | | [this.prop]: rules |
|---|
| | | }) |
|---|
| | | validator.validate({ |
|---|
| | | [this.prop]: this.fieldValue |
|---|
| | | }, { |
|---|
| | | firstFields: true |
|---|
| | | }, (errors, fields) => { |
|---|
| | | // è®°å½ç¶æåæ¥éä¿¡æ¯ |
|---|
| | | this.validateState = !errors ? 'success' : 'error' |
|---|
| | | this.validateMessage = errors ? errors[0].message : '' |
|---|
| | | |
|---|
| | | callback(this.validateMessage) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // æ¸
空å½åitemä¿¡æ¯ |
|---|
| | | resetField() { |
|---|
| | | this.parent.model[this.prop] = this.initialValue |
|---|
| | | // æ¸
空é误æ è®° |
|---|
| | | this.validateState = 'success' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .tn-form-item { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | padding: 20rpx 0; |
|---|
| | | font-size: 28rpx; |
|---|
| | | color: $tn-font-color; |
|---|
| | | box-sizing: border-box; |
|---|
| | | line-height: $tn-form-item-height; |
|---|
| | | |
|---|
| | | &__border-bottom--error:after { |
|---|
| | | border-color: $tn-color-red; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__body { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--left { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | &__content { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | position: relative; |
|---|
| | | align-items: center; |
|---|
| | | padding-right: 18rpx; |
|---|
| | | flex: 1; |
|---|
| | | |
|---|
| | | &--required { |
|---|
| | | position: relative; |
|---|
| | | right: 0; |
|---|
| | | vertical-align: middle; |
|---|
| | | color: $tn-color-red; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__icon { |
|---|
| | | color: $tn-font-sub-color; |
|---|
| | | margin-right: 8rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__label { |
|---|
| | | // display: flex; |
|---|
| | | // flex-direction: row; |
|---|
| | | // align-items: center; |
|---|
| | | // flex: 1; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--right { |
|---|
| | | flex: 1; |
|---|
| | | |
|---|
| | | &__content { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | flex: 1; |
|---|
| | | |
|---|
| | | &__slot { |
|---|
| | | flex: 1; |
|---|
| | | /* #ifndef MP */ |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__icon { |
|---|
| | | margin-left: 10rpx; |
|---|
| | | color: $tn-font-sub-color; |
|---|
| | | font-size: 30rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__message { |
|---|
| | | font-size: 24rpx; |
|---|
| | | line-height: 24rpx; |
|---|
| | | color: $tn-color-red; |
|---|
| | | margin-top: 12rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="tn-form-class tn-form"> |
|---|
| | | <slot></slot> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'tn-form', |
|---|
| | | props: { |
|---|
| | | // 表åæ°æ®å¯¹è±¡ï¼éè¦éªè¯ç表åæ°æ®ï¼ |
|---|
| | | model: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // åçé误æ¶çæ示æ¹å¼ |
|---|
| | | // toast - å¼¹åºtoastæ¡ |
|---|
| | | // message - æç¤ºä¿¡æ¯ |
|---|
| | | // border - å¦æ设置äºè¾¹æ¡ï¼è¾¹æ¡ä¼åæçº¢è² |
|---|
| | | // border-bottom - ä¸è¾¹æ¡ä¼åç°çº¢è² |
|---|
| | | // none - æ æ示 |
|---|
| | | errorType: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return ['message', 'toast'] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºè¡¨ååçä¸åçº¿è¾¹æ¡ |
|---|
| | | borderBottom: { |
|---|
| | | type:Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // label(æ ç¾å称)çä½ç½® |
|---|
| | | // left - 左边 |
|---|
| | | // top - ä¸è¾¹ |
|---|
| | | labelPosition: { |
|---|
| | | type: String, |
|---|
| | | default: 'left' |
|---|
| | | }, |
|---|
| | | // labelç宽度 |
|---|
| | | labelWidth: { |
|---|
| | | type: Number, |
|---|
| | | default: 90 |
|---|
| | | }, |
|---|
| | | // labelç对é½æ¹å¼ |
|---|
| | | // left - å·¦å¯¹é½ |
|---|
| | | // center - å±
ä¸å¯¹é½ |
|---|
| | | // right - å³å¯¹é½ |
|---|
| | | labelAlign: { |
|---|
| | | type: String, |
|---|
| | | default: 'left' |
|---|
| | | }, |
|---|
| | | // label çæ ·å¼ |
|---|
| | | labelStyle: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // åååä¼ éæ°æ® |
|---|
| | | provide() { |
|---|
| | | return { |
|---|
| | | tnForm: this |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | rules: {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | // åå¨å½åformä¸çææform-itemçå®ä¾ |
|---|
| | | // ä¸è½å®ä¹ådataä¸ï¼å¦åå°ç¨åºä¼å¾ªç¯å¼ç¨èæ¥é |
|---|
| | | this.fields = [] |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | /** |
|---|
| | | * 设置è§å |
|---|
| | | * |
|---|
| | | * @param {Object} rules |
|---|
| | | */ |
|---|
| | | setRules(rules) { |
|---|
| | | this.rules = rules |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * æ¸
空form-itemç»ä»¶ |
|---|
| | | */ |
|---|
| | | resetFields() { |
|---|
| | | this.fields.map(field => { |
|---|
| | | field.resetField() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * æ ¡éªæ°æ® |
|---|
| | | * @param {Object} callback æ ¡éªåè°æ¹æ³ |
|---|
| | | */ |
|---|
| | | validate(callback) { |
|---|
| | | return new Promise(resolve => { |
|---|
| | | // æ è®°æ ¡éªæ¯å¦éè¿ |
|---|
| | | let valid = true |
|---|
| | | // æ è®°æ¯å¦æ£æ¥å®æ¯ |
|---|
| | | let count = 0 |
|---|
| | | // åæ¾éè¯¯ä¿¡æ¯ |
|---|
| | | let errors = [] |
|---|
| | | |
|---|
| | | // 对ææform-itemè¿è¡æ ¡éª |
|---|
| | | this.fields.map(field => { |
|---|
| | | // è°ç¨å¯¹åºform-itemå®ä¾çvalidationæ ¡éªæ¹æ³ |
|---|
| | | field.validation('', error => { |
|---|
| | | // å¦ææä¸ä¸ªform-itemæ ¡éªä¸éè¿ï¼åæ´ä¸ªè¡¨åæ ¡éªä¸éè¿ |
|---|
| | | if (error) { |
|---|
| | | valid = false |
|---|
| | | errors.push(error) |
|---|
| | | } |
|---|
| | | // å½éåå®ææçform-itemçæ ¡éªè§åï¼è¿åä¿¡æ¯ |
|---|
| | | if (++count === this.fields.length) { |
|---|
| | | resolve(valid) |
|---|
| | | // å¤ææ¯å¦è®¾ç½®äºtoastçæ示æ¹å¼ï¼åªæ示表ååä¸æåé¢çä¸æ¡éè¯¯ä¿¡æ¯ |
|---|
| | | if (this.errorType.indexOf('none') === -1 && |
|---|
| | | this.errorType.indexOf('toast') >= 0 && |
|---|
| | | errors.length > 0) { |
|---|
| | | this.$t.message.toast(errors[0]) |
|---|
| | | } |
|---|
| | | // è°ç¨åè°æ¹æ³ |
|---|
| | | if (typeof callback == 'function') callback(valid) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="tn-goods-nav-class tn-goods-nav" |
|---|
| | | :class="[ |
|---|
| | | backgroundColorClass, |
|---|
| | | { |
|---|
| | | 'tn-goods-nav--fixed': fixed, |
|---|
| | | 'tn-safe-area-inset-bottom': safeAreaInsetBottom, |
|---|
| | | 'tn-goods-nav--shadow': shadow |
|---|
| | | } |
|---|
| | | ]" |
|---|
| | | :style="[backgroundColorStyle, navStyle]" |
|---|
| | | > |
|---|
| | | <view class="options"> |
|---|
| | | <view |
|---|
| | | v-for="(item, index) in optionsData" |
|---|
| | | :key="index" |
|---|
| | | class="options__item" |
|---|
| | | :class="[{'options__item--avatar': item.showAvatar}]" |
|---|
| | | @tap="handleOptionClick(index)" |
|---|
| | | > |
|---|
| | | <block v-if="item.showAvatar"> |
|---|
| | | <tn-avatar |
|---|
| | | :src="item.avatar" |
|---|
| | | size="sm" |
|---|
| | | :badge="item.showBadge" |
|---|
| | | :badgeText="item.count" |
|---|
| | | :badgeBgColor="item.countBackgroundColor" |
|---|
| | | :badgeColor="item.countFontColor" |
|---|
| | | :badgeSize="26" |
|---|
| | | ></tn-avatar> |
|---|
| | | </block> |
|---|
| | | <block v-else> |
|---|
| | | <view class="options__item__icon" :class="[`tn-icon-${item.icon}`]" :style="[optionStyle(index, 'icon')]"> |
|---|
| | | <tn-badge v-if="item.showBadge" :absolute="true" :backgroundColor="item.countBackgroundColor" :fontColor="item.countFontColor" :fontSize="16" padding="2rpx 5rpx">{{ item.count }}</tn-badge> |
|---|
| | | </view> |
|---|
| | | <view class="options__item__text" :style="[optionStyle(index, 'text')]">{{ item.text }}</view> |
|---|
| | | </block> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view class="buttons"> |
|---|
| | | <view |
|---|
| | | v-for="(item, index) in buttonGroupsData" |
|---|
| | | :key="index" |
|---|
| | | class="buttons__item" |
|---|
| | | :class="[buttonClass(index)]" |
|---|
| | | :style="[buttonStyle(index)]" |
|---|
| | | @tap="handleButtonClick(index)" |
|---|
| | | > |
|---|
| | | <view class="buttons__item__text">{{ item.text }}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'tn-goods-nav', |
|---|
| | | props: { |
|---|
| | | // éé¡¹ä¿¡æ¯ |
|---|
| | | // 建议ä¸è¶
è¿3个 |
|---|
| | | // { |
|---|
| | | // icon: '', // å¾æ å称 |
|---|
| | | // text: '', // æ¾ç¤ºçææ¬ |
|---|
| | | // count: '', // è§æ çå¼ |
|---|
| | | // countBackgroundColor: '', // è§æ èæ¯é¢è² |
|---|
| | | // countFontColor: '', // è§æ åä½é¢è² |
|---|
| | | // iconColor: '', // å¾æ é¢è² |
|---|
| | | // textColor: '', // ææ¬é¢è² |
|---|
| | | // avatar: '', // æ¾ç¤ºå¤´åï¼æ¤æ¶å°ä¸æ¾ç¤ºå¾æ åææ¬ï¼ |
|---|
| | | // } |
|---|
| | | options: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return [{ |
|---|
| | | icon: 'shop', |
|---|
| | | text: 'åºéº' |
|---|
| | | },{ |
|---|
| | | icon: 'service', |
|---|
| | | text: '客æ' |
|---|
| | | },{ |
|---|
| | | icon: 'star', |
|---|
| | | text: 'æ¶è' |
|---|
| | | }] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æé®ç» |
|---|
| | | // 建议ä¸è¶
è¿2个 |
|---|
| | | // { |
|---|
| | | // text: '', // æ¾ç¤ºçææ¬ |
|---|
| | | // backgroundColor: '', // æé®èæ¯é¢è² |
|---|
| | | // color: '' // ææ¬é¢è² |
|---|
| | | // } |
|---|
| | | buttonGroups: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return [{ |
|---|
| | | text: 'å å
¥è´ç©è½¦', |
|---|
| | | backgroundColor: '#FFA726', |
|---|
| | | color: '#FFFFFF' |
|---|
| | | },{ |
|---|
| | | text: 'ç»ç®', |
|---|
| | | backgroundColor: '#FF7043', |
|---|
| | | color: '#FFFFFF' |
|---|
| | | }] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // èæ¯é¢è² |
|---|
| | | backgroundColor: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // 导èªçé«åº¦ï¼åä½rpx |
|---|
| | | height: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // æ¾ç¤ºé´å½± |
|---|
| | | shadow: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // 导èªçå±çº§ |
|---|
| | | zIndex: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // æé®ç±»å |
|---|
| | | // rect -> æ¹å½¢ paddingRect -> ä¸ä¸å¸¦è¾¹è·æ¹å½¢ round -> åè§ |
|---|
| | | buttonType: { |
|---|
| | | type: String, |
|---|
| | | default: 'rect' |
|---|
| | | }, |
|---|
| | | // æ¯å¦åºå®å¨åºé¨ |
|---|
| | | fixed: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // æ¯å¦å¼å¯åºé¨å®å
¨åºéé
ï¼å¼å¯çè¯ï¼ä¼å¨iPhoneXæºååºé¨æ·»å ä¸å®çå
è¾¹è· |
|---|
| | | safeAreaInsetBottom: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | backgroundColorStyle() { |
|---|
| | | return this.$t.color.getBackgroundColorStyle(this.backgroundColor) |
|---|
| | | }, |
|---|
| | | backgroundColorClass() { |
|---|
| | | return this.$t.color.getBackgroundColorInternalClass(this.backgroundColor) |
|---|
| | | }, |
|---|
| | | navStyle() { |
|---|
| | | let style = {} |
|---|
| | | if (this.height) { |
|---|
| | | style.height = this.height + 'rpx' |
|---|
| | | } |
|---|
| | | style.zIndex = this.zIndex ? this.zIndex : this.$t.zIndex.goodsNav |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | // é项style |
|---|
| | | optionStyle() { |
|---|
| | | return (index, type) => { |
|---|
| | | let style = {} |
|---|
| | | const item = this.optionsData[index] |
|---|
| | | if (type === 'icon' && item.iconColor) { |
|---|
| | | style.color = item.iconColor |
|---|
| | | } else if (type === 'text' && item.fontColor) { |
|---|
| | | style.color = item.fontColor |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æé®class |
|---|
| | | buttonClass() { |
|---|
| | | return (index) => { |
|---|
| | | let clazz = '' |
|---|
| | | const item = this.buttonGroupsData[index] |
|---|
| | | if (item.backgroundColorClass) { |
|---|
| | | clazz += ` ${item.backgroundColorClass}` |
|---|
| | | } |
|---|
| | | if (item.colorClass) { |
|---|
| | | clazz += ` ${item.colorClass}` |
|---|
| | | } |
|---|
| | | |
|---|
| | | clazz += ` buttons__item--${this.$t.string.humpConvertChar(this.buttonType, '-')}` |
|---|
| | | |
|---|
| | | return clazz |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æé®style |
|---|
| | | buttonStyle() { |
|---|
| | | return (index) => { |
|---|
| | | let style = {} |
|---|
| | | const item = this.buttonGroupsData[index] |
|---|
| | | if (item.backgroundColorStyle) { |
|---|
| | | style.backgroundColor = item.backgroundColorStyle |
|---|
| | | } |
|---|
| | | if (item.colorStyle) { |
|---|
| | | style.color = item.colorStyle |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | options(val) { |
|---|
| | | this.initData() |
|---|
| | | }, |
|---|
| | | buttonGroups(val) { |
|---|
| | | this.initData() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // ä¿åé项æ°æ® |
|---|
| | | optionsData: [], |
|---|
| | | // ä¿åæé®ç»æ°æ® |
|---|
| | | buttonGroupsData: [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.initData() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // åå§åé项åæé®æ°æ® |
|---|
| | | initData() { |
|---|
| | | this.handleOptionsData() |
|---|
| | | this.handleButtonGroupsData() |
|---|
| | | }, |
|---|
| | | // é项ç¹å»äºä»¶ |
|---|
| | | handleOptionClick(index) { |
|---|
| | | this.$emit('optionClick', { |
|---|
| | | index: index |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // æé®ç¹å»äºä»¶ |
|---|
| | | handleButtonClick(index) { |
|---|
| | | this.$emit('buttonClick', { |
|---|
| | | index: index |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // å¤çé项ç»æ°æ® |
|---|
| | | handleOptionsData() { |
|---|
| | | this.optionsData = this.options.map((item) => { |
|---|
| | | let option = {...item} |
|---|
| | | option.showAvatar = item.hasOwnProperty('avatar') |
|---|
| | | if (item.hasOwnProperty('count')) { |
|---|
| | | const count = this.$t.number.formatNumberString(item.count, 2) |
|---|
| | | option.showBadge = true |
|---|
| | | option.count = typeof count === 'number' ? String(count) : count |
|---|
| | | option.countBackgroundColor = item.countBackgroundColor ? item.countBackgroundColor : '#01BEFF' |
|---|
| | | option.countFontColor = item.countFontColor ? item.countFontColor : '#FFFFFF' |
|---|
| | | } |
|---|
| | | |
|---|
| | | return option |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // å¤çæé®ç»æ°æ® |
|---|
| | | handleButtonGroupsData() { |
|---|
| | | this.buttonGroupsData = this.buttonGroups.map((item) => { |
|---|
| | | let button = {...item} |
|---|
| | | if (item.hasOwnProperty('backgroundColor')) { |
|---|
| | | button.backgroundColorClass = this.$t.color.getBackgroundColorInternalClass(item.backgroundColor) |
|---|
| | | button.backgroundColorStyle = this.$t.color.getBackgroundColorStyle(item.backgroundColor) |
|---|
| | | } |
|---|
| | | if (item.hasOwnProperty('color')) { |
|---|
| | | button.colorClass = this.$t.color.getBackgroundColorInternalClass(item.color) |
|---|
| | | button.colorStyle = this.$t.color.getBackgroundColorStyle(item.color) |
|---|
| | | } |
|---|
| | | return button |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .tn-goods-nav { |
|---|
| | | background-color: #FFFFFF; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | height: 88rpx; |
|---|
| | | width: 100%; |
|---|
| | | box-sizing: content-box; |
|---|
| | | |
|---|
| | | &--shadow { |
|---|
| | | box-shadow: 0rpx -10rpx 30rpx 0rpx rgba(0, 0, 0, 0.05); |
|---|
| | | |
|---|
| | | &::before { |
|---|
| | | content: " "; |
|---|
| | | position: absolute; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | bottom: 0; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | margin: auto; |
|---|
| | | background-color: transparent; |
|---|
| | | z-index: -1; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--fixed { |
|---|
| | | position: fixed; |
|---|
| | | bottom: 0; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .options { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | height: 100%; |
|---|
| | | color: #AAAAAA; |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | padding: 0 26rpx; |
|---|
| | | |
|---|
| | | &--avatar { |
|---|
| | | padding: 0rpx 0rpx 0rpx 26rpx !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__icon { |
|---|
| | | position: relative; |
|---|
| | | font-size: 36rpx; |
|---|
| | | margin-bottom: 6rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | font-size: 22rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .buttons { |
|---|
| | | flex: 1; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | height: 100%; |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | flex: 1; |
|---|
| | | padding: 0 10rpx; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | |
|---|
| | | &--rect { |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--padding-rect { |
|---|
| | | height: 80%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--round { |
|---|
| | | height: 75%; |
|---|
| | | &:first-child { |
|---|
| | | border-top-left-radius: 100rpx; |
|---|
| | | border-bottom-left-radius: 100rpx; |
|---|
| | | } |
|---|
| | | &:last-child { |
|---|
| | | border-top-right-radius: 100rpx; |
|---|
| | | border-bottom-right-radius: 100rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | display: inline-block; |
|---|
| | | font-weight: bold; |
|---|
| | | font-size: 30rpx; |
|---|
| | | white-space: nowrap; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="tn-grid-item-class tn-grid-item" |
|---|
| | | :class="[ |
|---|
| | | backgroundColorClass |
|---|
| | | ]" |
|---|
| | | :hover-class="hoverClass" |
|---|
| | | :hover-stay-time="150" |
|---|
| | | :style="{ |
|---|
| | | backgroundColor: backgroundColorStyle, |
|---|
| | | width: gridWidth |
|---|
| | | }" |
|---|
| | | @tap="click" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="tn-grid-item__box" |
|---|
| | | > |
|---|
| | | <slot></slot> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import componentsColorMixin from '../../libs/mixin/components_color.js' |
|---|
| | | export default { |
|---|
| | | mixins: [ componentsColorMixin ], |
|---|
| | | name: 'tn-grid-item', |
|---|
| | | props: { |
|---|
| | | // åºå· |
|---|
| | | index: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // ç¶ç»ä»¶æ°æ® |
|---|
| | | parentData: { |
|---|
| | | // æä¸å»çæ ·å¼ |
|---|
| | | hoverClass: '', |
|---|
| | | col: 3 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | // ç¶ç»ä»¶å®ä¾ |
|---|
| | | this.updateParentData() |
|---|
| | | this.parent.children.push(this) |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // 计ç®æ¯ä¸ªå®«æ ¼ç宽度 |
|---|
| | | gridWidth() { |
|---|
| | | // #ifdef MP-WEIXIN |
|---|
| | | return '100%' |
|---|
| | | // #endif |
|---|
| | | // #ifndef MP-WEIXIN |
|---|
| | | return 100 / Number(this.parentData.col) + '%' |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | // ç¹å»ææ |
|---|
| | | hoverClass() { |
|---|
| | | return this.parentData.hoverClass !== 'none' |
|---|
| | | ? this.parentData.hoverClass + ' tn-grid-item--hover' |
|---|
| | | : this.parentData.hoverClass |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // è·åç¶ç»ä»¶åæ° |
|---|
| | | updateParentData() { |
|---|
| | | this.getParentData('tn-grid') |
|---|
| | | }, |
|---|
| | | click() { |
|---|
| | | this.$emit('click', this.index) |
|---|
| | | this.parent && this.parent.click(this.index) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .tn-grid-item { |
|---|
| | | box-sizing: border-box; |
|---|
| | | background-color: #FFFFFF; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | /* #endif */ |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | position: relative; |
|---|
| | | flex-direction: column; |
|---|
| | | |
|---|
| | | /* #ifdef MP */ |
|---|
| | | // float: left; |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | &__box { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | /* #endif */ |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | flex-direction: column; |
|---|
| | | flex: 1; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--hover { |
|---|
| | | background: $tn-space-color !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="tn-grid-class tn-grid" |
|---|
| | | :style="{ |
|---|
| | | justifyContent: gridAlignStyle |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <slot></slot> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'tn-grid', |
|---|
| | | props: { |
|---|
| | | // åæå å |
|---|
| | | col: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 3 |
|---|
| | | }, |
|---|
| | | // å®«æ ¼å¯¹é½æ¹å¼ |
|---|
| | | // left å·¦å¯¹é½ center å±
ä¸å¯¹é½ right å³å¯¹é½ |
|---|
| | | align: { |
|---|
| | | type: String, |
|---|
| | | default: 'left' |
|---|
| | | }, |
|---|
| | | // ç¹å»æ¶çææï¼none没æææ |
|---|
| | | hoverClass: { |
|---|
| | | type: String, |
|---|
| | | default: 'tn-hover' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | // å½ç¶ç»ä»¶ååç»ä»¶éè¦å
±äº«åæ°ååï¼éç¥åç»ä»¶ |
|---|
| | | parentData() { |
|---|
| | | if (this.children.length) { |
|---|
| | | this.children.map(child => { |
|---|
| | | // å¤æåç»ä»¶æ¯å¦æupdateParentDataæ¹å¼ï¼æææ§è¡ |
|---|
| | | typeof(child.updateParentData) === 'function' && child.updateParentData() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | // å¦æå°childrenå®ä¹å¨dataä¸ï¼å¨å¾®ä¿¡å°ç¨åºä¼é æ循ç¯å¼ç¨èæ¥é |
|---|
| | | this.children = [] |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // 计ç®ç¶ç»ä»¶çå¼æ¯å¦åçåå |
|---|
| | | parentData() { |
|---|
| | | return [this.hoverClass, this.col, this.border] |
|---|
| | | }, |
|---|
| | | // å®«æ ¼å¯¹é½æ¹å¼ |
|---|
| | | gridAlignStyle() { |
|---|
| | | switch(this.align) { |
|---|
| | | case 'left': |
|---|
| | | return 'flex-start' |
|---|
| | | case 'center': |
|---|
| | | return 'center' |
|---|
| | | case 'right': |
|---|
| | | return 'flex-end' |
|---|
| | | default: |
|---|
| | | return 'flex-start' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | click(index) { |
|---|
| | | this.$emit('click', index) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | |
|---|
| | | // ç»ä»¶ä¸å
¼å®¹å°ç¨åºçæ¹å¼ï¼ä¸è¿ä¸è½ä½¿ç¨å¯¹é½æ¹å¼ |
|---|
| | | // .tn-grid { |
|---|
| | | // width: 100%; |
|---|
| | | // /* #ifdef MP */ |
|---|
| | | // position: relative; |
|---|
| | | // box-sizing: border-box; |
|---|
| | | // overflow: hidden; |
|---|
| | | // /* #endif */ |
|---|
| | | |
|---|
| | | // /* #ifndef MP */ |
|---|
| | | // /* #ifndef APP-NVUE */ |
|---|
| | | // display: flex; |
|---|
| | | // flex-direction: row; |
|---|
| | | // /* #endif */ |
|---|
| | | // flex-wrap: wrap; |
|---|
| | | // align-items: center; |
|---|
| | | // /* #endif */ |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // å¨ä½¿ç¨ç»ä»¶æ¶å
¼å®¹å°ç¨åº |
|---|
| | | .tn-grid { |
|---|
| | | width: 100%; |
|---|
| | | |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view v-if="!disabled" class="tn-image-upload-class tn-image-upload"> |
|---|
| | | <movable-area |
|---|
| | | class="tn-image-upload__movable-area" |
|---|
| | | :style="{ |
|---|
| | | height: movableAreaHeight |
|---|
| | | }" |
|---|
| | | @mouseenter="mouseEnterArea" |
|---|
| | | @mouseleave="mouseLeaveArea" |
|---|
| | | > |
|---|
| | | <block |
|---|
| | | v-for="(item, index) in lists" |
|---|
| | | :key="item.id" |
|---|
| | | > |
|---|
| | | <movable-view |
|---|
| | | class="tn-image-upload__movable-view" |
|---|
| | | :style="{ |
|---|
| | | width: $t.string.getLengthUnitValue(width), |
|---|
| | | height: $t.string.getLengthUnitValue(height), |
|---|
| | | zIndex: item.zIndex, |
|---|
| | | opacity: item.opacity, |
|---|
| | | |
|---|
| | | }" |
|---|
| | | :x="item.x" |
|---|
| | | :y="item.y" |
|---|
| | | direction="all" |
|---|
| | | :damping="40" |
|---|
| | | :disabled="item.disabled" |
|---|
| | | @change="movableChange($event, item)" |
|---|
| | | @touchstart="movableStart(item)" |
|---|
| | | @mousedown="movableStart(item)" |
|---|
| | | @touchend="movableEnd(item)" |
|---|
| | | @mouseup="movableEnd(item)" |
|---|
| | | @longpress="movableLongPress(item)" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="tn-image-upload__item tn-image-upload__item-preview" |
|---|
| | | :style="{ |
|---|
| | | width: $t.string.getLengthUnitValue(itemWidth, 'px'), |
|---|
| | | height: $t.string.getLengthUnitValue(itemHeight, 'px'), |
|---|
| | | transform: `scale(${item.scale})` |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <!-- å é¤æé® --> |
|---|
| | | <view |
|---|
| | | v-if="deleteable" |
|---|
| | | class="tn-image-upload__item-preview__delete" |
|---|
| | | @tap.stop="deleteItem(index)" |
|---|
| | | :style="{ |
|---|
| | | borderTopColor: deleteBackgroundColor |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="tn-image-upload__item-preview__delete--icon" |
|---|
| | | :class="[`tn-icon-${deleteIcon}`]" |
|---|
| | | :style="{ |
|---|
| | | color: deleteColor |
|---|
| | | }" |
|---|
| | | ></view> |
|---|
| | | </view> |
|---|
| | | <!-- è¿åº¦æ¡ --> |
|---|
| | | <tn-line-progress |
|---|
| | | v-if="showProgress && item.data.progress > 0 && !item.data.error" |
|---|
| | | class="tn-image-upload__item-preview__progress" |
|---|
| | | :percent="item.data.progress" |
|---|
| | | :showPercent="false" |
|---|
| | | :round="false" |
|---|
| | | :height="8" |
|---|
| | | ></tn-line-progress> |
|---|
| | | <!-- éè¯æé® --> |
|---|
| | | <view v-if="item.data.error" class="tn-image-upload__item-preview__error-btn" @tap.stop="retry(index)">ç¹å»éè¯</view> |
|---|
| | | <!-- å¾çä¿¡æ¯ --> |
|---|
| | | <image |
|---|
| | | class="tn-image-upload__item-preview__image" |
|---|
| | | :src="item.data.url || item.data.path" |
|---|
| | | :mode="imageMode" |
|---|
| | | @tap.stop="doPreviewImage(item.data.url || item.data.path, index)" |
|---|
| | | ></image> |
|---|
| | | </view> |
|---|
| | | </movable-view> |
|---|
| | | </block> |
|---|
| | | |
|---|
| | | <!-- æ·»å æé® --> |
|---|
| | | <view |
|---|
| | | v-if="maxCount > lists.length" |
|---|
| | | class="tn-image-upload__add" |
|---|
| | | :style="{ |
|---|
| | | top: addBtn.y + 'px', |
|---|
| | | left: addBtn.x + 'px', |
|---|
| | | width: $t.string.getLengthUnitValue(itemWidth, 'px'), |
|---|
| | | height: $t.string.getLengthUnitValue(itemHeight, 'px') |
|---|
| | | }" |
|---|
| | | @tap="selectFile" |
|---|
| | | > |
|---|
| | | <!-- æ·»å æé® --> |
|---|
| | | <view |
|---|
| | | class="tn-image-upload__item tn-image-upload__item-add" |
|---|
| | | hover-class="tn-hover-class" |
|---|
| | | hover-stay-time="150" |
|---|
| | | :style="{ |
|---|
| | | width: $t.string.getLengthUnitValue(itemWidth, 'px'), |
|---|
| | | height: $t.string.getLengthUnitValue(itemHeight, 'px') |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <view class="tn-image-upload__item-add--icon tn-icon-add"></view> |
|---|
| | | <view class="tn-image-upload__item-add__tips">{{ uploadText }}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </movable-area> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'tn-image-upload-drag', |
|---|
| | | props: { |
|---|
| | | // å·²ä¸ä¼ çæ件å表 |
|---|
| | | fileList: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // ä¸ä¼ å¾çå°å |
|---|
| | | action: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // ä¸ä¼ æ件çå段å称 |
|---|
| | | name: { |
|---|
| | | type: String, |
|---|
| | | default: 'file' |
|---|
| | | }, |
|---|
| | | // 头é¨ä¿¡æ¯ |
|---|
| | | header: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æºå¸¦çåæ° |
|---|
| | | formData: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç¦ç¨ |
|---|
| | | disabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // æ¯å¦èªå¨ä¸ä¼ |
|---|
| | | autoUpload: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ大ä¸ä¼ æ°é |
|---|
| | | maxCount: { |
|---|
| | | type: Number, |
|---|
| | | default: 9 |
|---|
| | | }, |
|---|
| | | // é¢è§ä¸ä¼ å¾ççè£åªæ¨¡å¼ |
|---|
| | | imageMode: { |
|---|
| | | type: String, |
|---|
| | | default: 'aspectFill' |
|---|
| | | }, |
|---|
| | | // ç¹å»å¾çæ¯å¦å
¨å±é¢è§ |
|---|
| | | previewFullImage: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºè¿åº¦æ¡ |
|---|
| | | showProgress: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå é¤æé® |
|---|
| | | deleteable: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // å é¤æé®å¾æ |
|---|
| | | deleteIcon: { |
|---|
| | | type: String, |
|---|
| | | default: 'close' |
|---|
| | | }, |
|---|
| | | // å é¤æé®çèæ¯é¢è² |
|---|
| | | deleteBackgroundColor: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // å é¤æé®çé¢è² |
|---|
| | | deleteColor: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // ä¸ä¼ åºåæ示æå |
|---|
| | | uploadText: { |
|---|
| | | type: String, |
|---|
| | | default: 'éæ©å¾ç' |
|---|
| | | }, |
|---|
| | | // æ¾ç¤ºtoastæ示 |
|---|
| | | showTips: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // é¢è§å¾çåéæ©å¾çåºåç宽度 |
|---|
| | | width: { |
|---|
| | | type: Number, |
|---|
| | | default: 200 |
|---|
| | | }, |
|---|
| | | // é¢è§å¾çåéæ©å¾çåºåçé«åº¦ |
|---|
| | | height: { |
|---|
| | | type: Number, |
|---|
| | | default: 200 |
|---|
| | | }, |
|---|
| | | // éæ©å¾çç尺寸 |
|---|
| | | // åèä¸ä¼ ææ¡£ https://uniapp.dcloud.io/api/media/image |
|---|
| | | sizeType: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return ['original', 'compressed'] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // å¾çæ¥æº |
|---|
| | | sourceType: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return ['album', 'camera'] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ¯å¦å¯ä»¥å¤é |
|---|
| | | multiple: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ件大å°(byte) |
|---|
| | | maxSize: { |
|---|
| | | type: Number, |
|---|
| | | default: 10 * 1024 * 1024 |
|---|
| | | }, |
|---|
| | | // å
许ä¸ä¼ çç±»å |
|---|
| | | limitType: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return ['png','jpg','jpeg','webp','gif','image'] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ¯å¦èªå®è½¬æ¢ä¸ºjson |
|---|
| | | toJson: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // ä¸ä¼ åé©åå½æ°ï¼æ¯ä¸ªæ件ä¸ä¼ åé½ä¼æ§è¡ |
|---|
| | | beforeUpload: { |
|---|
| | | type: Function, |
|---|
| | | default: null |
|---|
| | | }, |
|---|
| | | // å é¤æ件åé©åå½æ° |
|---|
| | | beforeRemove: { |
|---|
| | | type: Function, |
|---|
| | | default: null |
|---|
| | | }, |
|---|
| | | index: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | movableAreaHeight() { |
|---|
| | | if (this.lists.length < this.maxCount) { |
|---|
| | | return Math.ceil((this.lists.length + 1) / this.baseData.columns) * uni.upx2px(this.height) + 'px' |
|---|
| | | } else { |
|---|
| | | return Math.ceil(this.lists.length / this.baseData.columns) * uni.upx2px(this.height) + 'px' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | itemWidth() { |
|---|
| | | return uni.upx2px(this.width) - (uni.upx2px(10) * 2) |
|---|
| | | }, |
|---|
| | | itemHeight() { |
|---|
| | | return uni.upx2px(this.height) - (uni.upx2px(10) * 2) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | lists: [], |
|---|
| | | uploading: false, |
|---|
| | | baseData: { |
|---|
| | | windowWidth: 0, |
|---|
| | | columns: 0, |
|---|
| | | dragItem: null, |
|---|
| | | widthPx: 0, |
|---|
| | | heightPx: 0 |
|---|
| | | }, |
|---|
| | | addBtn: { |
|---|
| | | x: 0, |
|---|
| | | y: 0 |
|---|
| | | }, |
|---|
| | | timer: null, |
|---|
| | | dragging: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | // fileList: { |
|---|
| | | // handler(val) { |
|---|
| | | // val.map(value => { |
|---|
| | | // // é¦å
æ£æ¥å
é¨æ¯å¦å·²ç»æ·»å è¿è¿å¼ å¾çï¼å 为å¤é¨ç»å®äºä¸ä¸ªå¯¹è±¡ç»fileListçè¯(对象å¼ç¨)ï¼è¿è¡ä¿®æ¹å¤é¨fileListæ¶ï¼ |
|---|
| | | // // ä¼è§¦åwatchï¼å¯¼è´éæ°æåæ¥çå¾çå次添å å°this.lists |
|---|
| | | // // æ°ç»çsomeæ¹æ³æææ¯ï¼åªè¦æ°ç»å
ç´ æä»»æä¸ä¸ªå
ç´ æ¡ä»¶ç¬¦åï¼å°±è¿åtrueï¼èå¦ä¸ä¸ªæ°ç»çeveryæ¹æ³çæææ¯æ°ç»ææå
ç´ é½ç¬¦åæ¡ä»¶æè¿åtrue |
|---|
| | | // let tmp = this.lists.some(listVal => { |
|---|
| | | // return listVal.url === value.url |
|---|
| | | // }) |
|---|
| | | // // å¦æå
é¨æ²¡æè¿å¼ å¾çï¼åæ·»å å°å
é¨ |
|---|
| | | // !tmp && this.lists.push({ url: value.url, error: false, progress: 100 }) |
|---|
| | | // }) |
|---|
| | | // }, |
|---|
| | | // immediate: true |
|---|
| | | // }, |
|---|
| | | lists(val) { |
|---|
| | | this.$emit('on-list-change', this.sortList(), this.index) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.baseData.windowWidth = uni.getSystemInfoSync().windowWidth |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.updateDragInfo() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // æ¸
é¤å表 |
|---|
| | | clear() { |
|---|
| | | this.lists = [] |
|---|
| | | this.updateAddBtnPositioin() |
|---|
| | | }, |
|---|
| | | // éæ°ä¸ä¼ éåä¸ä¸ä¼ 失败æææ件 |
|---|
| | | reUpload() { |
|---|
| | | this.uploadFile() |
|---|
| | | }, |
|---|
| | | // éæ©å¾ç |
|---|
| | | selectFile() { |
|---|
| | | if (this.disabled) return |
|---|
| | | const { |
|---|
| | | name = '', |
|---|
| | | maxCount, |
|---|
| | | multiple, |
|---|
| | | maxSize, |
|---|
| | | sizeType, |
|---|
| | | lists, |
|---|
| | | camera, |
|---|
| | | compressed, |
|---|
| | | sourceType |
|---|
| | | } = this |
|---|
| | | let chooseFile = null |
|---|
| | | const newMaxCount = maxCount - lists.length |
|---|
| | | // åªéæ©å¾ççæ¶åä½¿ç¨ chooseImage æ¥å®ç° |
|---|
| | | chooseFile = new Promise((resolve, reject) => { |
|---|
| | | uni.chooseImage({ |
|---|
| | | count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1, |
|---|
| | | sourceType, |
|---|
| | | sizeType, |
|---|
| | | success: resolve, |
|---|
| | | fail: reject |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | chooseFile.then(res => { |
|---|
| | | let file = null |
|---|
| | | let listOldLength = lists.length |
|---|
| | | res.tempFiles.map((val, index) => { |
|---|
| | | if (!this.checkFileExt(val)) return |
|---|
| | | |
|---|
| | | // æ¯å¦è¶
åºæ大éå¶æ°é |
|---|
| | | if (!multiple && index >= 1) return |
|---|
| | | if (val.size > maxSize) { |
|---|
| | | this.$emit('on-oversize', val, this.sortList(), this.index) |
|---|
| | | this.showToast('è¶
åºå¯å
许æ件大å°') |
|---|
| | | } else { |
|---|
| | | if (maxCount <= lists.length) { |
|---|
| | | this.$emit('on-exceed', val, this.sortList(), this.index) |
|---|
| | | this.showToast('è¶
åºæ大å
许çæ件æ°') |
|---|
| | | return |
|---|
| | | } |
|---|
| | | lists.push(this.handleDragListItem({ |
|---|
| | | url: val.path, |
|---|
| | | progress: 0, |
|---|
| | | error: false, |
|---|
| | | file: val |
|---|
| | | })) |
|---|
| | | this.updateAddBtnPositioin() |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.$emit('on-choose-complete', this.sortList(), this.index) |
|---|
| | | if (this.autoUpload) this.uploadFile(listOldLength) |
|---|
| | | }).catch(err => { |
|---|
| | | this.$emit('on-choose-fail', err) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // æ示ç¨æ·ä¿¡æ¯ |
|---|
| | | showToast(message, force = false) { |
|---|
| | | if (this.showTips || force) { |
|---|
| | | this.$t.message.toast(message) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æå¨ä¸ä¼ ï¼éè¿refè¿è¡è°ç¨ |
|---|
| | | upload() { |
|---|
| | | this.uploadFile() |
|---|
| | | }, |
|---|
| | | // 对失败å¾çè¿è¡å次ä¸ä¼ |
|---|
| | | retry(index) { |
|---|
| | | this.lists[index].data.progress = 0 |
|---|
| | | this.lists[index].data.error = false |
|---|
| | | this.lists[index].data.response = null |
|---|
| | | this.$t.message.loading('éæ°ä¸ä¼ ') |
|---|
| | | this.uploadFile(index) |
|---|
| | | }, |
|---|
| | | // ä¸ä¼ æ件 |
|---|
| | | async uploadFile(index = 0) { |
|---|
| | | if (this.disabled) return |
|---|
| | | if (this.uploading) return |
|---|
| | | // å
¨é¨ä¸ä¼ å®æ |
|---|
| | | if (index >= this.lists.length) { |
|---|
| | | this.$emit('on-uploaded', this.sortList(), this.index) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | // æ£æ¥æ¯å¦å·²ç»å
¨é¨ä¸ä¼ æè
ä¸ä¼ ä¸ |
|---|
| | | if (this.lists[index].data.progress === 100) { |
|---|
| | | this.lists[index].data.uploadTask = null |
|---|
| | | if (this.autoUpload) this.uploadFile(index + 1) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | // æ§è¡before-uploadé©å |
|---|
| | | if (this.beforeUpload && typeof(this.beforeUpload) === 'function') { |
|---|
| | | // å¨å¾®ä¿¡ï¼æ¯ä»å®çç¯å¢(H5æ£å¸¸)ï¼ä¼å¯¼è´ç¶ç»ä»¶å®ä¹çå½æ°ä½ä¸çthisåæåç»ä»¶çthis |
|---|
| | | // éè¿bind()æ¹æ³ï¼ç»å®ç¶ç»ä»¶çthisï¼è®©thisçthis为ç¶ç»ä»¶çä¸ä¸æ |
|---|
| | | // å 为uploadç»ä»¶å¯è½ä¼è¢«åµå¥å¨å
¶ä»ç»ä»¶å
ï¼æ¯å¦tn-formï¼è¿æ¶this.$parentå
¶å®ä¸ºtn-formçthisï¼ |
|---|
| | | // é页é¢çthisï¼æ以è¿ééè¦å¾ä¸åéï¼ä¸ç´å¯»æ¾å°æ顶端ç$parentï¼è¿éç¨äºthis.$u.$parent.call(this) |
|---|
| | | let beforeResponse = this.beforeUpload.bind(this.$t.$parent.call(this))(index, this.lists) |
|---|
| | | // å¤ææ¯å¦è¿åäºPromise |
|---|
| | | if (!!beforeResponse && typeof beforeResponse.then === 'function') { |
|---|
| | | await beforeResponse.then(res => { |
|---|
| | | // promiseè¿åæåï¼ä¸è¿è¡æä½ç»§ç» |
|---|
| | | }).catch(err => { |
|---|
| | | // è¿å
¥catchåè°çè¯ï¼ç»§ç»ä¸ä¸å¼ |
|---|
| | | return this.uploadFile(index + 1) |
|---|
| | | }) |
|---|
| | | } else if (beforeResponse === false) { |
|---|
| | | // å¦æè¿åflaseï¼ç»§ç»ä¸ä¸å¼ å¾çä¸ä¼ |
|---|
| | | return this.uploadFile(index + 1) |
|---|
| | | } else { |
|---|
| | | // 为trueçæ
åµï¼ä¸è¿è¡æä½ |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // æ£æ¥ä¸ä¼ å°å |
|---|
| | | if (!this.action) { |
|---|
| | | this.showToast('请é
ç½®ä¸ä¼ å°å', true) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.lists[index].data.error = false |
|---|
| | | this.uploading = true |
|---|
| | | // å建ä¸ä¼ 对象 |
|---|
| | | const task = uni.uploadFile({ |
|---|
| | | url: this.action, |
|---|
| | | filePath: this.lists[index].data.url, |
|---|
| | | name: this.name, |
|---|
| | | formData: this.formData, |
|---|
| | | header: this.header, |
|---|
| | | success: res => { |
|---|
| | | // å¤æåæ¯å¦ä¸ºjsonå符串ï¼å°å
¶è½¬æ¢ä¸ºjsonæ ¼å¼ |
|---|
| | | let data = this.toJson && this.$t.test.jsonString(res.data) ? JSON.parse(res.data) : res.data |
|---|
| | | if (![200, 201, 204].includes(res.statusCode)) { |
|---|
| | | this.uploadError(index, data) |
|---|
| | | } else { |
|---|
| | | this.lists[index].data.response = data |
|---|
| | | this.lists[index].data.progress = 100 |
|---|
| | | this.lists[index].data.error = false |
|---|
| | | this.$emit('on-success', data, index, this.sortList(), this.index) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | fail: err => { |
|---|
| | | this.uploadError(index, err) |
|---|
| | | }, |
|---|
| | | complete: res => { |
|---|
| | | this.$t.message.closeLoading() |
|---|
| | | this.uploading = false |
|---|
| | | this.uploadFile(index + 1) |
|---|
| | | this.$emit('on-change', res, index, this.sortList(), this.index) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.lists[index].uploadTask = task |
|---|
| | | task.onProgressUpdate(res => { |
|---|
| | | if (res.progress > 0) { |
|---|
| | | this.lists[index].data.progress = res.progress |
|---|
| | | this.$emit('on-progress', res, index, this.sortList(), this.index) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // ä¸ä¼ 失败 |
|---|
| | | uploadError(index, err) { |
|---|
| | | this.lists[index].data.progress = 0 |
|---|
| | | this.lists[index].data.error = true |
|---|
| | | this.lists[index].data.response = null |
|---|
| | | this.showToast('ä¸ä¼ 失败ï¼è¯·éè¯') |
|---|
| | | this.$emit('on-error', err, index, this.sortList(), this.index) |
|---|
| | | }, |
|---|
| | | // å é¤ä¸ä¸ªå¾ç |
|---|
| | | deleteItem(index) { |
|---|
| | | if (!this.deleteable) return |
|---|
| | | this.$t.message.modal( |
|---|
| | | 'æ示', |
|---|
| | | 'ä½ ç¡®å®è¦å é¤åï¼', |
|---|
| | | async () => { |
|---|
| | | // å
æ£æ¥æ¯å¦æå®ä¹before-remove移é¤åé©å |
|---|
| | | // æ§è¡before-removeé©å |
|---|
| | | if (this.beforeRemove && typeof(this.beforeRemove) === 'function') { |
|---|
| | | let beforeResponse = this.beforeRemove.bind(this.$t.$parent.call(this))(index, this.lists) |
|---|
| | | // å¤ææ¯å¦è¿åpromise |
|---|
| | | if (!!beforeResponse && typeof beforeResponse.then === 'function') { |
|---|
| | | await beforeResponse.then(res => { |
|---|
| | | // promiseè¿åæåä¸è¿è¡æä½ |
|---|
| | | this.handlerDeleteItem(index) |
|---|
| | | }).catch(err => { |
|---|
| | | this.showToast('å é¤æä½è¢«ä¸æ') |
|---|
| | | }) |
|---|
| | | } else if (beforeResponse === false) { |
|---|
| | | this.showToast('å é¤æä½è¢«ä¸æ') |
|---|
| | | } else { |
|---|
| | | this.handlerDeleteItem(index) |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.handlerDeleteItem(index) |
|---|
| | | } |
|---|
| | | }, true) |
|---|
| | | }, |
|---|
| | | // 移é¤æ件æä½ |
|---|
| | | handlerDeleteItem(index) { |
|---|
| | | // å¦ææ件æ£å¨ä¸ä¼ ä¸ï¼ç»æ¢ä¸ä¼ ä»»å¡ |
|---|
| | | if (this.lists[index].data.progress < 100 && this.lists[index].data.progress > 0) { |
|---|
| | | typeof this.lists[index].data.uploadTask !== 'undefined' && this.lists[index].data.uploadTask.abort() |
|---|
| | | } |
|---|
| | | this.remove(index) |
|---|
| | | this.$forceUpdate() |
|---|
| | | this.$emit('on-remove', index, this.sortList(), this.index) |
|---|
| | | this.showToast('å é¤æå') |
|---|
| | | }, |
|---|
| | | // 移é¤æ件ï¼éè¿refæå¨å½¢å¼è¿è¡è°ç¨ |
|---|
| | | remove(index) { |
|---|
| | | if (!this.deleteable) return |
|---|
| | | // å¤æç´¢å¼åæ³ |
|---|
| | | if (index >= 0 && index < this.lists.length) { |
|---|
| | | let currentItemIndex = this.lists[index].index |
|---|
| | | this.lists.splice(index, 1) |
|---|
| | | // éæ°æååè¡¨ä¿¡æ¯ |
|---|
| | | for (let item of this.lists) { |
|---|
| | | if (item.index > currentItemIndex) { |
|---|
| | | item.index -= 1 |
|---|
| | | item.x = item.positionX * this.baseData.widthPx |
|---|
| | | item.y = item.positionY * this.baseData.heightPx |
|---|
| | | item.positionX = item.index % this.baseData.columns |
|---|
| | | item.positionY = Math.floor(item.index / this.baseData.columns) |
|---|
| | | this.$nextTick(() => { |
|---|
| | | item.x = item.positionX * this.baseData.widthPx |
|---|
| | | item.y = item.positionY * this.baseData.heightPx |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.updateAddBtnPositioin() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // é¢è§å¾ç |
|---|
| | | doPreviewImage(url, index) { |
|---|
| | | if (!this.previewFullImage) return |
|---|
| | | const images = this.lists.sort((l1, l2) => { return l1.index - l2.index}).map(item => item.data.url || item.data.path) |
|---|
| | | uni.previewImage({ |
|---|
| | | urls: images, |
|---|
| | | current: url, |
|---|
| | | success: () => { |
|---|
| | | this.$emit('on-preview', url, this.sortList(), this.index) |
|---|
| | | }, |
|---|
| | | fail: () => { |
|---|
| | | this.showToast('é¢è§å¾ç失败') |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // æ£æ¥æ件åç¼æ¯å¦åæ³ |
|---|
| | | checkFileExt(file) { |
|---|
| | | // æ¯å¦ä¸ºåæ³åç¼ |
|---|
| | | let noArrowExt = false |
|---|
| | | // åç¼å |
|---|
| | | let fileExt = '' |
|---|
| | | const reg = /.+\./ |
|---|
| | | |
|---|
| | | // #ifdef H5 |
|---|
| | | fileExt = file.name.replace(reg, '').toLowerCase() |
|---|
| | | // #endif |
|---|
| | | // #ifndef H5 |
|---|
| | | fileExt = file.path.replace(reg, '').toLowerCase() |
|---|
| | | // #endif |
|---|
| | | noArrowExt = this.limitType.some(ext => { |
|---|
| | | return ext.toLowerCase() === fileExt |
|---|
| | | }) |
|---|
| | | if (!noArrowExt) this.showToast(`ä¸æ¯æ${fileExt}æ ¼å¼çæ件`) |
|---|
| | | return noArrowExt |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /********************* ææ½å¤ç ********************/ |
|---|
| | | |
|---|
| | | // æ´æ°ææ½ä¿¡æ¯ |
|---|
| | | updateDragInfo() { |
|---|
| | | this.baseData.widthPx = uni.upx2px(this.width) |
|---|
| | | this.baseData.heightPx = uni.upx2px(this.height) |
|---|
| | | |
|---|
| | | // è·åå¯ç§»å¨åºåçä¿¡æ¯ï¼ç¨äºå¤æå½åæå¤å°å |
|---|
| | | const query = uni.createSelectorQuery().in(this) |
|---|
| | | query.select('.tn-image-upload__movable-area').boundingClientRect() |
|---|
| | | query.exec((res) => { |
|---|
| | | if (!res) { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.updateDragInfo() |
|---|
| | | }, 10) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.baseData.columns = Math.floor(res[0].width / this.baseData.widthPx) |
|---|
| | | |
|---|
| | | // åå§åå¯ææ½åè¡¨ä¿¡æ¯ |
|---|
| | | this.lists = [] |
|---|
| | | this.fileList.forEach((item) => { |
|---|
| | | // é¦å
æ£æ¥å
é¨æ¯å¦å·²ç»æ·»å è¿è¿å¼ å¾çï¼å 为å¤é¨ç»å®äºä¸ä¸ªå¯¹è±¡ç»fileListçè¯(对象å¼ç¨)ï¼è¿è¡ä¿®æ¹å¤é¨fileListæ¶ï¼ |
|---|
| | | // ä¼è§¦åwatchï¼å¯¼è´éæ°æåæ¥çå¾çå次添å å°this.lists |
|---|
| | | // æ°ç»çsomeæ¹æ³æææ¯ï¼åªè¦æ°ç»å
ç´ æä»»æä¸ä¸ªå
ç´ æ¡ä»¶ç¬¦åï¼å°±è¿åtrueï¼èå¦ä¸ä¸ªæ°ç»çeveryæ¹æ³çæææ¯æ°ç»ææå
ç´ é½ç¬¦åæ¡ä»¶æè¿åtrue |
|---|
| | | let tmp = this.lists.map(value => { |
|---|
| | | return value.data |
|---|
| | | }).some(listVal => { |
|---|
| | | return listVal.url === item.url |
|---|
| | | }) |
|---|
| | | // å¦æå
é¨æ²¡æè¿å¼ å¾çï¼åæ·»å å°å
é¨ |
|---|
| | | !tmp && this.lists.push(this.handleDragListItem({ |
|---|
| | | url: item.url, |
|---|
| | | error: false, |
|---|
| | | progress: 100 |
|---|
| | | })) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // æ´æ°æ·»å æé®ä½ç½® |
|---|
| | | this.updateAddBtnPositioin() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // å¤çææ½åè¡¨ä¿¡æ¯ |
|---|
| | | handleDragListItem(item) { |
|---|
| | | const positionX = this.lists.length % this.baseData.columns |
|---|
| | | const positionY = Math.floor(this.lists.length / this.baseData.columns) |
|---|
| | | const x = positionX * this.baseData.widthPx |
|---|
| | | const y = positionY * this.baseData.heightPx |
|---|
| | | return { |
|---|
| | | id: this.unique(), |
|---|
| | | x, |
|---|
| | | y, |
|---|
| | | preX: x, |
|---|
| | | preY: y, |
|---|
| | | positionX, |
|---|
| | | positionY, |
|---|
| | | zIndex:1, |
|---|
| | | disabled: true, |
|---|
| | | opacity: 1, |
|---|
| | | scale: 1, |
|---|
| | | index: this.lists.length, |
|---|
| | | offset: 0, |
|---|
| | | moveEnd: false, |
|---|
| | | moving: false, |
|---|
| | | data: { |
|---|
| | | ...item |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // çæå
ç´ å¯ä¸id |
|---|
| | | unique(n = 6) { |
|---|
| | | let id = '' |
|---|
| | | for (let i = 0; i < n; i++) id += Math.floor(Math.random() * 10) |
|---|
| | | return 'tn_' + new Date().getTime() + id |
|---|
| | | }, |
|---|
| | | // æ´æ°æ·»å æé®ä½ç½® |
|---|
| | | updateAddBtnPositioin() { |
|---|
| | | if (this.lists.length >= this.maxCount) return |
|---|
| | | |
|---|
| | | this.addBtn.x = (this.lists.length % this.baseData.columns) * this.baseData.widthPx |
|---|
| | | this.addBtn.y = Math.floor(this.lists.length / this.baseData.columns) * this.baseData.heightPx |
|---|
| | | }, |
|---|
| | | // è·åæåºåæ°æ® |
|---|
| | | sortList() { |
|---|
| | | const list = this.lists.slice() |
|---|
| | | list.sort((l1, l2) => { |
|---|
| | | return l1.index - l2.index |
|---|
| | | }) |
|---|
| | | return list.map(item => { |
|---|
| | | return item.data |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | mouseEnterArea () { |
|---|
| | | // #ifdef H5 |
|---|
| | | this.lists.forEach(item => { |
|---|
| | | item.disabled = false |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | mouseLeaveArea () { |
|---|
| | | // #ifdef H5 |
|---|
| | | if (this.baseData.dragItem) { |
|---|
| | | this.lists.forEach(item => { |
|---|
| | | item.disabled = true |
|---|
| | | item.zIndex = 1 |
|---|
| | | item.offset = 0 |
|---|
| | | item.moveEnd = true |
|---|
| | | if (item.id === this.baseData.dragItem.id) { |
|---|
| | | if (this.timer) { |
|---|
| | | clearTimeout(this.timer) |
|---|
| | | this.timer = null |
|---|
| | | } |
|---|
| | | item.x = item.preX |
|---|
| | | item.y = item.preY |
|---|
| | | this.$nextTick(() => { |
|---|
| | | item.x = item.positionX * this.baseData.widthPx |
|---|
| | | item.y = item.positionY * this.baseData.heightPx |
|---|
| | | this.baseData.dragItem = null |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.dragging = false |
|---|
| | | } |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | movableLongPress(item) { |
|---|
| | | // #ifndef H5 |
|---|
| | | uni.vibrateShort() |
|---|
| | | // console.log("LongPress--------------------------------------------------------------"); |
|---|
| | | this.lists.forEach(value => { |
|---|
| | | value.moving = false |
|---|
| | | }) |
|---|
| | | this.dragging = true |
|---|
| | | // 设置对åºçå
ç´ å
许æå¨ |
|---|
| | | const index = this.lists.findIndex(obj => { |
|---|
| | | return obj.id === item.id |
|---|
| | | }) |
|---|
| | | item.disabled = false |
|---|
| | | item.opacity = 0.7 |
|---|
| | | item.scale = 1.1 |
|---|
| | | this.$set(this.lists, index, item) |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | movableChange (e, item) { |
|---|
| | | if (!item || !this.dragging) return |
|---|
| | | // console.log("movableChange"); |
|---|
| | | item.moving = true |
|---|
| | | item.preX = e.detail.x |
|---|
| | | item.preY = e.detail.y |
|---|
| | | // console.log(item.preX, item.preY); |
|---|
| | | |
|---|
| | | if (e.detail.source === 'touch') { |
|---|
| | | if (!item.moveEnd) { |
|---|
| | | item.offset = Math.sqrt( |
|---|
| | | Math.pow(item.preX - item.positionX * this.baseData.widthPx, 2) + |
|---|
| | | Math.pow(item.preY - item.positionY * this.baseData.heightPx, 2)) |
|---|
| | | } |
|---|
| | | let x = Math.floor((e.detail.x + this.baseData.widthPx / 2) / this.baseData.widthPx) |
|---|
| | | if (x > this.baseData.columns) return |
|---|
| | | let y = Math.floor((e.detail.y + this.baseData.heightPx / 2) / this.baseData.heightPx) |
|---|
| | | let index = this.baseData.columns * y + x |
|---|
| | | if (item.index !== index && index < this.lists.length) { |
|---|
| | | for (let obj of this.lists) { |
|---|
| | | if (item.index > index && obj.index >= index && obj.index < item.index) { |
|---|
| | | this.updateItemPosition(obj, 1) |
|---|
| | | } else if (item.index < index && obj.index <= index && obj.index > item.index) { |
|---|
| | | this.updateItemPosition(obj, -1) |
|---|
| | | } else if (item.id != obj.id) { |
|---|
| | | // obj.offset = 0 |
|---|
| | | // console.log(obj.moving); |
|---|
| | | // if (!obj.moving) { |
|---|
| | | // obj.preX = obj.positionX * this.baseData.widthPx |
|---|
| | | // obj.preY = obj.positionY * this.baseData.heightPx |
|---|
| | | // console.log("moving", obj.id, obj.preX, obj.preY); |
|---|
| | | // } |
|---|
| | | // obj.x = obj.preX |
|---|
| | | // obj.y = obj.preY |
|---|
| | | // // console.log(obj.id, obj.preX, obj.preY); |
|---|
| | | // this.$nextTick(() => { |
|---|
| | | // obj.x = obj.positionX * this.baseData.widthPx |
|---|
| | | // obj.y = obj.positionY * this.baseData.heightPx |
|---|
| | | // }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | item.index = index |
|---|
| | | item.positionX = x |
|---|
| | | item.positionY = y |
|---|
| | | // TODO åéäºä»¶ |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | movableStart (item) { |
|---|
| | | // console.log("movableStart"); |
|---|
| | | this.lists.forEach(item => { |
|---|
| | | item.zIndex = 1 |
|---|
| | | // #ifdef H5 |
|---|
| | | item.disabled = false |
|---|
| | | // #endif |
|---|
| | | }) |
|---|
| | | item.zIndex = 10 |
|---|
| | | item.moveEnd = false |
|---|
| | | this.baseData.dragItem = item |
|---|
| | | // #ifdef H5 |
|---|
| | | this.dragging =true |
|---|
| | | this.timer = setTimeout(() => { |
|---|
| | | item.opacity = 0.7 |
|---|
| | | item.scale = 1.1 |
|---|
| | | clearTimeout(this.timer) |
|---|
| | | this.timer = null |
|---|
| | | }, 200) |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | movableEnd (item) { |
|---|
| | | if (!this.dragging) return |
|---|
| | | // console.log("movableEnd"); |
|---|
| | | const index = this.lists.findIndex(obj => { |
|---|
| | | return obj.id === item.id |
|---|
| | | }) |
|---|
| | | if (!item.moving) { |
|---|
| | | item.preX = item.positionX * this.baseData.widthPx |
|---|
| | | item.preY = item.positionY * this.baseData.heightPx |
|---|
| | | } |
|---|
| | | item.x = item.preX |
|---|
| | | item.y = item.preY |
|---|
| | | item.offset = 0 |
|---|
| | | item.moveEnd = true |
|---|
| | | item.moving = false |
|---|
| | | item.disabled = true |
|---|
| | | // console.log(item.x, item.y); |
|---|
| | | // console.log(item.id, item.moving); |
|---|
| | | // this.$set(this.lists, index, item) |
|---|
| | | // this.lists[index] = item |
|---|
| | | // console.log(this.lists[index]); |
|---|
| | | this.lists.forEach(listValue => { |
|---|
| | | listValue.moving = false |
|---|
| | | listValue.disabled = true |
|---|
| | | }) |
|---|
| | | this.$nextTick(() => { |
|---|
| | | item.x = item.positionX * this.baseData.widthPx |
|---|
| | | item.y = item.positionY * this.baseData.heightPx |
|---|
| | | item.opacity = 1 |
|---|
| | | item.scale = 1 |
|---|
| | | this.baseData.dragItem = null |
|---|
| | | this.dragging = false |
|---|
| | | // console.log(item.x, item.y); |
|---|
| | | this.$set(this.lists, index, item) |
|---|
| | | }) |
|---|
| | | this.$emit('sort-list', this.sortList()) |
|---|
| | | }, |
|---|
| | | // æ´æ°å¾çä½ç½®ä¿¡æ¯ |
|---|
| | | updateItemPosition(item, offset) { |
|---|
| | | const index = this.lists.findIndex(obj => { |
|---|
| | | return obj.id === item.id |
|---|
| | | }) |
|---|
| | | item.index += offset |
|---|
| | | item.offset = 0 |
|---|
| | | item.positionX = item.index % this.baseData.columns |
|---|
| | | item.positionY = Math.floor(item.index / this.baseData.columns) |
|---|
| | | if (!item.moving) { |
|---|
| | | item.preX = item.positionX * this.baseData.widthPx |
|---|
| | | item.preY = item.positionY * this.baseData.heightPx |
|---|
| | | } |
|---|
| | | item.x = item.preX |
|---|
| | | item.y = item.preY |
|---|
| | | // console.log("updateItemPosition", item.id, item.preX, item.preY); |
|---|
| | | // this.$set(this.lists, index, item) |
|---|
| | | this.$nextTick(() => { |
|---|
| | | item.x = item.positionX * this.baseData.widthPx |
|---|
| | | item.y = item.positionY * this.baseData.heightPx |
|---|
| | | this.$set(this.lists, index, item) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | |
|---|
| | | .tn-image-upload { |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | &__movable-area { |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__movable-view { |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | width: 200rpx; |
|---|
| | | height: 200rpx; |
|---|
| | | background-color: transparent; |
|---|
| | | position: relative; |
|---|
| | | border-radius: 5rpx; |
|---|
| | | overflow: hidden; |
|---|
| | | |
|---|
| | | &-preview { |
|---|
| | | border: 1rpx solid $tn-space-color; |
|---|
| | | |
|---|
| | | &__delete { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | right: 0; |
|---|
| | | z-index: 10; |
|---|
| | | border-top: 60rpx solid; |
|---|
| | | border-left: 60rpx solid transparent; |
|---|
| | | border-top-color: rgba(0,0,0,0.1); |
|---|
| | | width: 0rpx; |
|---|
| | | height: 0rpx; |
|---|
| | | |
|---|
| | | &--icon { |
|---|
| | | position: absolute; |
|---|
| | | top: -50rpx; |
|---|
| | | right: 6rpx; |
|---|
| | | color: #FFFFFF; |
|---|
| | | font-size: 24rpx; |
|---|
| | | line-height: 1; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__progress { |
|---|
| | | position: absolute; |
|---|
| | | width: auto; |
|---|
| | | bottom: 0rpx; |
|---|
| | | left: 0rpx; |
|---|
| | | right: 0rpx; |
|---|
| | | z-index: 9; |
|---|
| | | /* #ifdef MP-WEIXIN */ |
|---|
| | | display: inline-flex; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__error-btn { |
|---|
| | | position: absolute; |
|---|
| | | bottom: 0; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | background-color: rgba(0,0,0,0.5); |
|---|
| | | color: #FFFFFF; |
|---|
| | | font-size: 20rpx; |
|---|
| | | padding: 8rpx 0; |
|---|
| | | text-align: center; |
|---|
| | | z-index: 9; |
|---|
| | | line-height: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__image { |
|---|
| | | display: block; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | // border-radius: 10rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &-add { |
|---|
| | | flex-direction: column; |
|---|
| | | color: $tn-content-color; |
|---|
| | | font-size: 26rpx; |
|---|
| | | |
|---|
| | | &--icon { |
|---|
| | | font-size: 40rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__tips { |
|---|
| | | margin-top: 20rpx; |
|---|
| | | line-height: 40rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__add { |
|---|
| | | background-color: $tn-space-color; |
|---|
| | | position: absolute; |
|---|
| | | // border-radius: 10rpx; |
|---|
| | | // margin: 10rpx; |
|---|
| | | // margin-left: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view v-if="!disabled" class="tn-image-upload-class tn-image-upload"> |
|---|
| | | <block v-if="showUploadList"> |
|---|
| | | <view |
|---|
| | | v-for="(item, index) in lists" |
|---|
| | | :key="index" |
|---|
| | | class="tn-image-upload__item tn-image-upload__item-preview" |
|---|
| | | :style="{ |
|---|
| | | width: $t.string.getLengthUnitValue(width), |
|---|
| | | height: $t.string.getLengthUnitValue(height) |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <!-- å é¤æé® --> |
|---|
| | | <view |
|---|
| | | v-if="deleteable" |
|---|
| | | class="tn-image-upload__item-preview__delete" |
|---|
| | | @tap.stop="deleteItem(index)" |
|---|
| | | :style="{ |
|---|
| | | borderTopColor: deleteBackgroundColor |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="tn-image-upload__item-preview__delete--icon" |
|---|
| | | :class="[`tn-icon-${deleteIcon}`]" |
|---|
| | | :style="{ |
|---|
| | | color: deleteColor |
|---|
| | | }" |
|---|
| | | ></view> |
|---|
| | | </view> |
|---|
| | | <!-- è¿åº¦æ¡ --> |
|---|
| | | <tn-line-progress |
|---|
| | | v-if="showProgress && item.progress > 0 && !item.error" |
|---|
| | | class="tn-image-upload__item-preview__progress" |
|---|
| | | :percent="item.progress" |
|---|
| | | :showPercent="false" |
|---|
| | | :round="false" |
|---|
| | | :height="8" |
|---|
| | | ></tn-line-progress> |
|---|
| | | <!-- éè¯æé® --> |
|---|
| | | <view v-if="item.error" class="tn-image-upload__item-preview__error-btn" @tap.stop="retry(index)">ç¹å»éè¯</view> |
|---|
| | | <!-- å¾çä¿¡æ¯ --> |
|---|
| | | <image |
|---|
| | | class="tn-image-upload__item-preview__image" |
|---|
| | | :src="item.url || item.path" |
|---|
| | | :mode="imageMode" |
|---|
| | | @tap.stop="doPreviewImage(item.url || item.path, index)" |
|---|
| | | ></image> |
|---|
| | | </view> |
|---|
| | | </block> |
|---|
| | | <!-- <view v-if="$slots.file || $slots.$file" style="width: 100%;"> |
|---|
| | | |
|---|
| | | </view> --> |
|---|
| | | <!-- èªå®ä¹å¾çå±ç¤ºå表 --> |
|---|
| | | <slot name="file" :file="lists"></slot> |
|---|
| | | |
|---|
| | | <!-- æ·»å æé® --> |
|---|
| | | <view v-if="maxCount > lists.length" class="tn-image-upload__add" :class="{'tn-image-upload__add--custom': customBtn}" @tap="selectFile"> |
|---|
| | | <!-- æ·»å æé® --> |
|---|
| | | <view |
|---|
| | | v-if="!customBtn" |
|---|
| | | class="tn-image-upload__item tn-image-upload__item-add" |
|---|
| | | hover-class="tn-hover-class" |
|---|
| | | hover-stay-time="150" |
|---|
| | | :style="{ |
|---|
| | | width: $t.string.getLengthUnitValue(width), |
|---|
| | | height: $t.string.getLengthUnitValue(height) |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <view class="tn-image-upload__item-add--icon tn-icon-add"></view> |
|---|
| | | <view class="tn-image-upload__item-add__tips">{{ uploadText }}</view> |
|---|
| | | </view> |
|---|
| | | <!-- èªå®ä¹æ·»å æé® --> |
|---|
| | | <view> |
|---|
| | | <slot name="addBtn"></slot> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'tn-image-upload', |
|---|
| | | props: { |
|---|
| | | // å·²ä¸ä¼ çæ件å表 |
|---|
| | | fileList: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // ä¸ä¼ å¾çå°å |
|---|
| | | action: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // ä¸ä¼ æ件çå段å称 |
|---|
| | | name: { |
|---|
| | | type: String, |
|---|
| | | default: 'file' |
|---|
| | | }, |
|---|
| | | // 头é¨ä¿¡æ¯ |
|---|
| | | header: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æºå¸¦çåæ° |
|---|
| | | formData: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç¦ç¨ |
|---|
| | | disabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // æ¯å¦èªå¨ä¸ä¼ |
|---|
| | | autoUpload: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ大ä¸ä¼ æ°é |
|---|
| | | maxCount: { |
|---|
| | | type: Number, |
|---|
| | | default: 9 |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºç»ä»¶èªå¸¦çå¾çé¢è§ |
|---|
| | | showUploadList: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // é¢è§ä¸ä¼ å¾ççè£åªæ¨¡å¼ |
|---|
| | | imageMode: { |
|---|
| | | type: String, |
|---|
| | | default: 'aspectFill' |
|---|
| | | }, |
|---|
| | | // ç¹å»å¾çæ¯å¦å
¨å±é¢è§ |
|---|
| | | previewFullImage: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºè¿åº¦æ¡ |
|---|
| | | showProgress: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå é¤æé® |
|---|
| | | deleteable: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // å é¤æé®å¾æ |
|---|
| | | deleteIcon: { |
|---|
| | | type: String, |
|---|
| | | default: 'close' |
|---|
| | | }, |
|---|
| | | // å é¤æé®çèæ¯é¢è² |
|---|
| | | deleteBackgroundColor: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // å é¤æé®çé¢è² |
|---|
| | | deleteColor: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // ä¸ä¼ åºåæ示æå |
|---|
| | | uploadText: { |
|---|
| | | type: String, |
|---|
| | | default: 'éæ©å¾ç' |
|---|
| | | }, |
|---|
| | | // æ¾ç¤ºtoastæ示 |
|---|
| | | showTips: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // èªå®ä¹éæ©å¾æ æé® |
|---|
| | | customBtn: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // é¢è§å¾çåéæ©å¾çåºåç宽度 |
|---|
| | | width: { |
|---|
| | | type: Number, |
|---|
| | | default: 200 |
|---|
| | | }, |
|---|
| | | // é¢è§å¾çåéæ©å¾çåºåçé«åº¦ |
|---|
| | | height: { |
|---|
| | | type: Number, |
|---|
| | | default: 200 |
|---|
| | | }, |
|---|
| | | // éæ©å¾çç尺寸 |
|---|
| | | // åèä¸ä¼ ææ¡£ https://uniapp.dcloud.io/api/media/image |
|---|
| | | sizeType: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return ['original', 'compressed'] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // å¾çæ¥æº |
|---|
| | | sourceType: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return ['album', 'camera'] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ¯å¦å¯ä»¥å¤é |
|---|
| | | multiple: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ件大å°(byte) |
|---|
| | | maxSize: { |
|---|
| | | type: Number, |
|---|
| | | default: 10 * 1024 * 1024 |
|---|
| | | }, |
|---|
| | | // å
许ä¸ä¼ çç±»å |
|---|
| | | limitType: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return ['png','jpg','jpeg','webp','gif','image'] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ¯å¦èªå®è½¬æ¢ä¸ºjson |
|---|
| | | toJson: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // ä¸ä¼ åé©åå½æ°ï¼æ¯ä¸ªæ件ä¸ä¼ åé½ä¼æ§è¡ |
|---|
| | | beforeUpload: { |
|---|
| | | type: Function, |
|---|
| | | default: null |
|---|
| | | }, |
|---|
| | | // å é¤æ件åé©åå½æ° |
|---|
| | | beforeRemove: { |
|---|
| | | type: Function, |
|---|
| | | default: null |
|---|
| | | }, |
|---|
| | | index: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | lists: [], |
|---|
| | | uploading: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | fileList: { |
|---|
| | | handler(val) { |
|---|
| | | val.map(value => { |
|---|
| | | // é¦å
æ£æ¥å
é¨æ¯å¦å·²ç»æ·»å è¿è¿å¼ å¾çï¼å 为å¤é¨ç»å®äºä¸ä¸ªå¯¹è±¡ç»fileListçè¯(对象å¼ç¨)ï¼è¿è¡ä¿®æ¹å¤é¨fileListæ¶ï¼ |
|---|
| | | // ä¼è§¦åwatchï¼å¯¼è´éæ°æåæ¥çå¾çå次添å å°this.lists |
|---|
| | | // æ°ç»çsomeæ¹æ³æææ¯ï¼åªè¦æ°ç»å
ç´ æä»»æä¸ä¸ªå
ç´ æ¡ä»¶ç¬¦åï¼å°±è¿åtrueï¼èå¦ä¸ä¸ªæ°ç»çeveryæ¹æ³çæææ¯æ°ç»ææå
ç´ é½ç¬¦åæ¡ä»¶æè¿åtrue |
|---|
| | | let tmp = this.lists.some(listVal => { |
|---|
| | | return listVal.url === value.url |
|---|
| | | }) |
|---|
| | | // å¦æå
é¨æ²¡æè¿å¼ å¾çï¼åæ·»å å°å
é¨ |
|---|
| | | !tmp && this.lists.push({ url: value.url, error: false, progress: 100 }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | immediate: true |
|---|
| | | }, |
|---|
| | | lists(val) { |
|---|
| | | this.$emit('on-list-change', val, this.index) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // æ¸
é¤å表 |
|---|
| | | clear() { |
|---|
| | | this.lists = [] |
|---|
| | | }, |
|---|
| | | // éæ°ä¸ä¼ éåä¸ä¸ä¼ 失败æææ件 |
|---|
| | | reUpload() { |
|---|
| | | this.uploadFile() |
|---|
| | | }, |
|---|
| | | // éæ©å¾ç |
|---|
| | | selectFile() { |
|---|
| | | if (this.disabled) return |
|---|
| | | const { |
|---|
| | | name = '', |
|---|
| | | maxCount, |
|---|
| | | multiple, |
|---|
| | | maxSize, |
|---|
| | | sizeType, |
|---|
| | | lists, |
|---|
| | | camera, |
|---|
| | | compressed, |
|---|
| | | sourceType |
|---|
| | | } = this |
|---|
| | | let chooseFile = null |
|---|
| | | const newMaxCount = maxCount - lists.length |
|---|
| | | // åªéæ©å¾ççæ¶åä½¿ç¨ chooseImage æ¥å®ç° |
|---|
| | | chooseFile = new Promise((resolve, reject) => { |
|---|
| | | uni.chooseImage({ |
|---|
| | | count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1, |
|---|
| | | sourceType, |
|---|
| | | sizeType, |
|---|
| | | success: resolve, |
|---|
| | | fail: reject |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | chooseFile.then(res => { |
|---|
| | | let file = null |
|---|
| | | let listOldLength = lists.length |
|---|
| | | res.tempFiles.map((val, index) => { |
|---|
| | | if (!this.checkFileExt(val)) return |
|---|
| | | |
|---|
| | | // æ¯å¦è¶
åºæ大éå¶æ°é |
|---|
| | | if (!multiple && index >= 1) return |
|---|
| | | if (val.size > maxSize) { |
|---|
| | | this.$emit('on-oversize', val, lists, this.index) |
|---|
| | | this.showToast('è¶
åºå¯å
许æ件大å°') |
|---|
| | | } else { |
|---|
| | | if (maxCount <= lists.length) { |
|---|
| | | this.$emit('on-exceed', val, lists, this.index) |
|---|
| | | this.showToast('è¶
åºæ大å
许çæ件æ°') |
|---|
| | | return |
|---|
| | | } |
|---|
| | | lists.push({ |
|---|
| | | url: val.path, |
|---|
| | | progress: 0, |
|---|
| | | error: false, |
|---|
| | | file: val |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.$emit('on-choose-complete', this.lists, this.index) |
|---|
| | | if (this.autoUpload) this.uploadFile(listOldLength) |
|---|
| | | }).catch(err => { |
|---|
| | | this.$emit('on-choose-fail', err) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // æ示ç¨æ·ä¿¡æ¯ |
|---|
| | | showToast(message, force = false) { |
|---|
| | | if (this.showTips || force) { |
|---|
| | | this.$t.message.toast(message) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æå¨ä¸ä¼ ï¼éè¿refè¿è¡è°ç¨ |
|---|
| | | upload() { |
|---|
| | | this.uploadFile() |
|---|
| | | }, |
|---|
| | | // 对失败å¾çè¿è¡å次ä¸ä¼ |
|---|
| | | retry(index) { |
|---|
| | | this.lists[index].progress = 0 |
|---|
| | | this.lists[index].error = false |
|---|
| | | this.lists[index].response = null |
|---|
| | | this.$t.message.loading('éæ°ä¸ä¼ ') |
|---|
| | | this.uploadFile(index) |
|---|
| | | }, |
|---|
| | | // ä¸ä¼ æ件 |
|---|
| | | async uploadFile(index = 0) { |
|---|
| | | if (this.disabled) return |
|---|
| | | if (this.uploading) return |
|---|
| | | // å
¨é¨ä¸ä¼ å®æ |
|---|
| | | if (index >= this.lists.length) { |
|---|
| | | this.$emit('on-uploaded', this.lists, this.index) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | // æ£æ¥æ¯å¦å·²ç»å
¨é¨ä¸ä¼ æè
ä¸ä¼ ä¸ |
|---|
| | | if (this.lists[index].progress === 100) { |
|---|
| | | this.lists[index].uploadTask = null |
|---|
| | | if (this.autoUpload) this.uploadFile(index + 1) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | // æ§è¡before-uploadé©å |
|---|
| | | if (this.beforeUpload && typeof(this.beforeUpload) === 'function') { |
|---|
| | | // å¨å¾®ä¿¡ï¼æ¯ä»å®çç¯å¢(H5æ£å¸¸)ï¼ä¼å¯¼è´ç¶ç»ä»¶å®ä¹çå½æ°ä½ä¸çthisåæåç»ä»¶çthis |
|---|
| | | // éè¿bind()æ¹æ³ï¼ç»å®ç¶ç»ä»¶çthisï¼è®©thisçthis为ç¶ç»ä»¶çä¸ä¸æ |
|---|
| | | // å 为uploadç»ä»¶å¯è½ä¼è¢«åµå¥å¨å
¶ä»ç»ä»¶å
ï¼æ¯å¦tn-formï¼è¿æ¶this.$parentå
¶å®ä¸ºtn-formçthisï¼ |
|---|
| | | // é页é¢çthisï¼æ以è¿ééè¦å¾ä¸åéï¼ä¸ç´å¯»æ¾å°æ顶端ç$parentï¼è¿éç¨äºthis.$u.$parent.call(this) |
|---|
| | | let beforeResponse = this.beforeUpload.bind(this.$t.$parent.call(this))(index, this.lists) |
|---|
| | | // å¤ææ¯å¦è¿åäºPromise |
|---|
| | | if (!!beforeResponse && typeof beforeResponse.then === 'function') { |
|---|
| | | await beforeResponse.then(res => { |
|---|
| | | // promiseè¿åæåï¼ä¸è¿è¡æä½ç»§ç» |
|---|
| | | }).catch(err => { |
|---|
| | | // è¿å
¥catchåè°çè¯ï¼ç»§ç»ä¸ä¸å¼ |
|---|
| | | return this.uploadFile(index + 1) |
|---|
| | | }) |
|---|
| | | } else if (beforeResponse === false) { |
|---|
| | | // å¦æè¿åflaseï¼ç»§ç»ä¸ä¸å¼ å¾çä¸ä¼ |
|---|
| | | return this.uploadFile(index + 1) |
|---|
| | | } else { |
|---|
| | | // 为trueçæ
åµï¼ä¸è¿è¡æä½ |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // æ£æ¥ä¸ä¼ å°å |
|---|
| | | if (!this.action) { |
|---|
| | | this.showToast('请é
ç½®ä¸ä¼ å°å', true) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.lists[index].error = false |
|---|
| | | this.uploading = true |
|---|
| | | // å建ä¸ä¼ 对象 |
|---|
| | | const task = uni.uploadFile({ |
|---|
| | | url: this.action, |
|---|
| | | filePath: this.lists[index].url, |
|---|
| | | name: this.name, |
|---|
| | | formData: this.formData, |
|---|
| | | header: this.header, |
|---|
| | | success: res => { |
|---|
| | | // å¤æåæ¯å¦ä¸ºjsonå符串ï¼å°å
¶è½¬æ¢ä¸ºjsonæ ¼å¼ |
|---|
| | | let data = this.toJson && this.$t.test.jsonString(res.data) ? JSON.parse(res.data) : res.data |
|---|
| | | if (![200, 201, 204].includes(res.statusCode)) { |
|---|
| | | this.uploadError(index, data) |
|---|
| | | } else { |
|---|
| | | this.lists[index].response = data |
|---|
| | | this.lists[index].progress = 100 |
|---|
| | | this.lists[index].error = false |
|---|
| | | this.$emit('on-success', data, index, this.lists, this.index) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | fail: err => { |
|---|
| | | this.uploadError(index, err) |
|---|
| | | }, |
|---|
| | | complete: res => { |
|---|
| | | this.$t.message.closeLoading() |
|---|
| | | this.uploading = false |
|---|
| | | this.uploadFile(index + 1) |
|---|
| | | this.$emit('on-change', res, index, this.lists, this.index) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.lists[index].uploadTask = task |
|---|
| | | task.onProgressUpdate(res => { |
|---|
| | | if (res.progress > 0) { |
|---|
| | | this.lists[index].progress = res.progress |
|---|
| | | this.$emit('on-progress', res, index, this.lists, this.index) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // ä¸ä¼ 失败 |
|---|
| | | uploadError(index, err) { |
|---|
| | | this.lists[index].progress = 0 |
|---|
| | | this.lists[index].error = true |
|---|
| | | this.lists[index].response = null |
|---|
| | | this.showToast('ä¸ä¼ 失败ï¼è¯·éè¯') |
|---|
| | | this.$emit('on-error', err, index, this.lists, this.index) |
|---|
| | | }, |
|---|
| | | // å é¤ä¸ä¸ªå¾ç |
|---|
| | | deleteItem(index) { |
|---|
| | | if (!this.deleteable) return |
|---|
| | | this.$t.message.modal( |
|---|
| | | 'æ示', |
|---|
| | | 'æ¨ç¡®å®è¦å é¤åï¼', |
|---|
| | | async () => { |
|---|
| | | // å
æ£æ¥æ¯å¦æå®ä¹before-remove移é¤åé©å |
|---|
| | | // æ§è¡before-removeé©å |
|---|
| | | if (this.beforeRemove && typeof(this.beforeRemove) === 'function') { |
|---|
| | | let beforeResponse = this.beforeRemove.bind(this.$t.$parent.call(this))(index, this.lists) |
|---|
| | | // å¤ææ¯å¦è¿åpromise |
|---|
| | | if (!!beforeResponse && typeof beforeResponse.then === 'function') { |
|---|
| | | await beforeResponse.then(res => { |
|---|
| | | // promiseè¿åæåä¸è¿è¡æä½ |
|---|
| | | this.handlerDeleteItem(index) |
|---|
| | | }).catch(err => { |
|---|
| | | this.showToast('å é¤æä½è¢«ä¸æ') |
|---|
| | | }) |
|---|
| | | } else if (beforeResponse === false) { |
|---|
| | | this.showToast('å é¤æä½è¢«ä¸æ') |
|---|
| | | } else { |
|---|
| | | this.handlerDeleteItem(index) |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.handlerDeleteItem(index) |
|---|
| | | } |
|---|
| | | }, true) |
|---|
| | | }, |
|---|
| | | // 移é¤æ件æä½ |
|---|
| | | handlerDeleteItem(index) { |
|---|
| | | // å¦ææ件æ£å¨ä¸ä¼ ä¸ï¼ç»æ¢ä¸ä¼ ä»»å¡ |
|---|
| | | if (this.lists[index].progress < 100 && this.lists[index].progress > 0) { |
|---|
| | | typeof this.lists[index].uploadTask !== 'undefined' && this.lists[index].uploadTask.abort() |
|---|
| | | } |
|---|
| | | this.lists.splice(index, 1) |
|---|
| | | this.$forceUpdate() |
|---|
| | | this.$emit('on-remove', index, this.lists, this.index) |
|---|
| | | this.showToast('å é¤æå') |
|---|
| | | }, |
|---|
| | | // 移é¤æ件ï¼éè¿refæå¨å½¢å¼è¿è¡è°ç¨ |
|---|
| | | remove(index) { |
|---|
| | | if (!this.deleteable) return |
|---|
| | | // å¤æç´¢å¼åæ³ |
|---|
| | | if (index >= 0 && index < this.lists.length) { |
|---|
| | | this.lists.splice(index, 1) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // é¢è§å¾ç |
|---|
| | | doPreviewImage(url, index) { |
|---|
| | | if (!this.previewFullImage) return |
|---|
| | | const images = this.lists.map(item => item.url || item.path) |
|---|
| | | uni.previewImage({ |
|---|
| | | urls: images, |
|---|
| | | current: url, |
|---|
| | | success: () => { |
|---|
| | | this.$emit('on-preview', url, this.lists, this.index) |
|---|
| | | }, |
|---|
| | | fail: () => { |
|---|
| | | this.showToast('é¢è§å¾ç失败') |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // æ£æ¥æ件åç¼æ¯å¦åæ³ |
|---|
| | | checkFileExt(file) { |
|---|
| | | // æ¯å¦ä¸ºåæ³åç¼ |
|---|
| | | let noArrowExt = false |
|---|
| | | // åç¼å |
|---|
| | | let fileExt = '' |
|---|
| | | const reg = /.+\./ |
|---|
| | | |
|---|
| | | // #ifdef H5 |
|---|
| | | fileExt = file.name.replace(reg, '').toLowerCase() |
|---|
| | | // #endif |
|---|
| | | // #ifndef H5 |
|---|
| | | fileExt = file.path.replace(reg, '').toLowerCase() |
|---|
| | | // #endif |
|---|
| | | noArrowExt = this.limitType.some(ext => { |
|---|
| | | return ext.toLowerCase() === fileExt |
|---|
| | | }) |
|---|
| | | if (!noArrowExt) this.showToast(`ä¸æ¯æ${fileExt}æ ¼å¼çæ件`) |
|---|
| | | return noArrowExt |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | |
|---|
| | | .tn-image-upload { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | width: 200rpx; |
|---|
| | | height: 200rpx; |
|---|
| | | overflow: hidden; |
|---|
| | | margin: 12rpx; |
|---|
| | | margin-left: 0; |
|---|
| | | background-color: $tn-font-holder-color; |
|---|
| | | position: relative; |
|---|
| | | border-radius: 10rpx; |
|---|
| | | |
|---|
| | | &-preview { |
|---|
| | | border: 1rpx solid $tn-border-solid-color; |
|---|
| | | |
|---|
| | | &__delete { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | right: 0; |
|---|
| | | z-index: 10; |
|---|
| | | border-top: 60rpx solid; |
|---|
| | | border-left: 60rpx solid transparent; |
|---|
| | | border-top-color: $tn-color-red; |
|---|
| | | width: 0rpx; |
|---|
| | | height: 0rpx; |
|---|
| | | |
|---|
| | | &--icon { |
|---|
| | | position: absolute; |
|---|
| | | top: -50rpx; |
|---|
| | | right: 6rpx; |
|---|
| | | color: #FFFFFF; |
|---|
| | | font-size: 24rpx; |
|---|
| | | line-height: 1; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__progress { |
|---|
| | | position: absolute; |
|---|
| | | width: auto; |
|---|
| | | bottom: 0rpx; |
|---|
| | | left: 0rpx; |
|---|
| | | right: 0rpx; |
|---|
| | | z-index: 9; |
|---|
| | | /* #ifdef MP-WEIXIN */ |
|---|
| | | display: inline-flex; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__error-btn { |
|---|
| | | position: absolute; |
|---|
| | | bottom: 0; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | background-color: $tn-color-red; |
|---|
| | | color: #FFFFFF; |
|---|
| | | font-size: 20rpx; |
|---|
| | | padding: 8rpx 0; |
|---|
| | | text-align: center; |
|---|
| | | z-index: 9; |
|---|
| | | line-height: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__image { |
|---|
| | | display: block; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | border-radius: 10rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &-add { |
|---|
| | | flex-direction: column; |
|---|
| | | color: $tn-content-color; |
|---|
| | | font-size: 26rpx; |
|---|
| | | |
|---|
| | | &--icon { |
|---|
| | | font-size: 40rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__tips { |
|---|
| | | margin-top: 20rpx; |
|---|
| | | line-height: 40rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__add { |
|---|
| | | width: auto; |
|---|
| | | display: inline-block; |
|---|
| | | |
|---|
| | | &--custom { |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| 吉安PDA/tuniao-ui/components/tn-index-anchor/tn-index-anchor.vue
吉安PDA/tuniao-ui/components/tn-index-list/tn-index-list.vue
吉安PDA/tuniao-ui/components/tn-input/tn-input.vue
吉安PDA/tuniao-ui/components/tn-keyboard/tn-keyboard.vue
吉安PDA/tuniao-ui/components/tn-landscape/tn-landscape.vue
吉安PDA/tuniao-ui/components/tn-lazy-load/tn-lazy-load.vue
吉安PDA/tuniao-ui/components/tn-line-progress/tn-line-progress.vue
吉安PDA/tuniao-ui/components/tn-list-cell/tn-list-cell.vue
吉安PDA/tuniao-ui/components/tn-list-view/tn-list-view.vue
吉安PDA/tuniao-ui/components/tn-load-more/tn-load-more.vue
吉安PDA/tuniao-ui/components/tn-loading/tn-loading.vue
吉安PDA/tuniao-ui/components/tn-modal/tn-modal.vue
吉安PDA/tuniao-ui/components/tn-nav-bar/tn-nav-bar.vue
吉安PDA/tuniao-ui/components/tn-notice-bar/tn-notice-bar.vue
吉安PDA/tuniao-ui/components/tn-number-box/tn-number-box.vue
吉安PDA/tuniao-ui/components/tn-number-keyboard/tn-number-keyboard.vue
吉安PDA/tuniao-ui/components/tn-picker/tn-picker.vue
吉安PDA/tuniao-ui/components/tn-popup/tn-popup.vue
吉安PDA/tuniao-ui/components/tn-radio-group/tn-radio-group.vue
吉安PDA/tuniao-ui/components/tn-radio/tn-radio.vue
吉安PDA/tuniao-ui/components/tn-rate/tn-rate.vue
吉安PDA/tuniao-ui/components/tn-read-more/tn-read-more.vue
吉安PDA/tuniao-ui/components/tn-row-notice/tn-row-notice.vue
吉安PDA/tuniao-ui/components/tn-scroll-list/tn-scroll-list.vue
吉安PDA/tuniao-ui/components/tn-scroll-view/tn-scroll-view.vue
吉安PDA/tuniao-ui/components/tn-select/tn-select.vue
吉安PDA/tuniao-ui/components/tn-sign-board/tn-sign-board.vue
吉安PDA/tuniao-ui/components/tn-skeleton/tn-skeleton.vue
吉安PDA/tuniao-ui/components/tn-slider/tn-slider.vue
吉安PDA/tuniao-ui/components/tn-stack-swiper/index-h5.wxs
吉安PDA/tuniao-ui/components/tn-stack-swiper/index.wxs
吉安PDA/tuniao-ui/components/tn-stack-swiper/tn-stack-swiper.vue
吉安PDA/tuniao-ui/components/tn-steps/tn-steps.vue
吉安PDA/tuniao-ui/components/tn-sticky/tn-sticky.vue
吉安PDA/tuniao-ui/components/tn-subsection/tn-subsection.vue
吉安PDA/tuniao-ui/components/tn-swipe-action-item/index.wxs
吉安PDA/tuniao-ui/components/tn-swipe-action-item/tn-swipe-action-item.vue
吉安PDA/tuniao-ui/components/tn-swipe-action/tn-swipe-action.vue
吉安PDA/tuniao-ui/components/tn-swiper/tn-swiper.vue
吉安PDA/tuniao-ui/components/tn-switch/tn-switch.vue
吉安PDA/tuniao-ui/components/tn-tabbar/tn-tabbar.vue
吉安PDA/tuniao-ui/components/tn-table/tn-table.vue
吉安PDA/tuniao-ui/components/tn-tabs-swiper/tn-tabs-swiper.vue
吉安PDA/tuniao-ui/components/tn-tabs/tn-tabs.vue
吉安PDA/tuniao-ui/components/tn-tag/tn-tag.vue
吉安PDA/tuniao-ui/components/tn-td/tn-td.vue
吉安PDA/tuniao-ui/components/tn-time-line-item/tn-time-line-item.vue
吉安PDA/tuniao-ui/components/tn-time-line-item/tn-time-line-item.vue_bk
吉安PDA/tuniao-ui/components/tn-time-line/tn-time-line.vue
吉安PDA/tuniao-ui/components/tn-time-line/tn-time-line.vue_bk
吉安PDA/tuniao-ui/components/tn-tips/tn-tips.vue
吉安PDA/tuniao-ui/components/tn-toast/tn-toast.vue
吉安PDA/tuniao-ui/components/tn-tr/tn-tr.vue
吉安PDA/tuniao-ui/components/tn-tree-node/tn-tree-node.vue
吉安PDA/tuniao-ui/components/tn-tree-view/tn-tree-view.vue
吉安PDA/tuniao-ui/components/tn-verification-code-input/tn-verification-code-input.vue
吉安PDA/tuniao-ui/components/tn-verification-code/tn-verification-code.vue
吉安PDA/tuniao-ui/components/tn-waterfall/tn-waterfall.vue
吉安PDA/tuniao-ui/iconfont.css
吉安PDA/tuniao-ui/index.js
吉安PDA/tuniao-ui/index.scss
吉安PDA/tuniao-ui/libs/config/color.js
吉安PDA/tuniao-ui/libs/config/zIndex.js
吉安PDA/tuniao-ui/libs/css/color.scss
吉安PDA/tuniao-ui/libs/css/main.scss
吉安PDA/tuniao-ui/libs/css/style.h5.scss
吉安PDA/tuniao-ui/libs/css/style.mp.scss
吉安PDA/tuniao-ui/libs/function/$parent.js
吉安PDA/tuniao-ui/libs/function/array.js
吉安PDA/tuniao-ui/libs/function/color.js
吉安PDA/tuniao-ui/libs/function/colorUtils.js
吉安PDA/tuniao-ui/libs/function/deepClone.js
吉安PDA/tuniao-ui/libs/function/message.js
吉安PDA/tuniao-ui/libs/function/messageUtils.js
吉安PDA/tuniao-ui/libs/function/number.js
吉安PDA/tuniao-ui/libs/function/string.js
吉安PDA/tuniao-ui/libs/function/test.js
吉安PDA/tuniao-ui/libs/function/updateCustomBarInfo.js
吉安PDA/tuniao-ui/libs/function/uuid.js
吉安PDA/tuniao-ui/libs/mixin/components_color.js
吉安PDA/tuniao-ui/libs/mixin/mixin.js
吉安PDA/tuniao-ui/libs/mixin/mpShare.js
吉安PDA/tuniao-ui/libs/mixin/touch.js
吉安PDA/tuniao-ui/libs/utils/area.js
吉安PDA/tuniao-ui/libs/utils/async-validator.js
吉安PDA/tuniao-ui/libs/utils/calendar.js
吉安PDA/tuniao-ui/libs/utils/city.js
吉安PDA/tuniao-ui/libs/utils/emitter.js
吉安PDA/tuniao-ui/libs/utils/province.js
吉安PDA/tuniao-ui/theme.scss
吉安PDA/uni.scss
吉安PDA/uni_modules/uni-badge/changelog.md
吉安PDA/uni_modules/uni-badge/components/uni-badge/uni-badge.vue
吉安PDA/uni_modules/uni-badge/package.json
吉安PDA/uni_modules/uni-badge/readme.md
吉安PDA/uni_modules/uni-card/changelog.md
吉安PDA/uni_modules/uni-card/components/uni-card/uni-card.vue
吉安PDA/uni_modules/uni-card/package.json
吉安PDA/uni_modules/uni-card/readme.md
吉安PDA/uni_modules/uni-combox/changelog.md
吉安PDA/uni_modules/uni-combox/components/uni-combox/uni-combox.vue
吉安PDA/uni_modules/uni-combox/package.json
吉安PDA/uni_modules/uni-combox/readme.md
吉安PDA/uni_modules/uni-data-checkbox/changelog.md
吉安PDA/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue
吉安PDA/uni_modules/uni-data-checkbox/package.json
吉安PDA/uni_modules/uni-data-checkbox/readme.md
吉安PDA/uni_modules/uni-data-select/changelog.md
吉安PDA/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue
吉安PDA/uni_modules/uni-data-select/package.json
吉安PDA/uni_modules/uni-data-select/readme.md
吉安PDA/uni_modules/uni-easyinput/changelog.md
吉安PDA/uni_modules/uni-easyinput/components/uni-easyinput/common.js
吉安PDA/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue
吉安PDA/uni_modules/uni-easyinput/package.json
吉安PDA/uni_modules/uni-easyinput/readme.md
吉安PDA/uni_modules/uni-forms/changelog.md
吉安PDA/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue
吉安PDA/uni_modules/uni-forms/components/uni-forms/uni-forms.vue
吉安PDA/uni_modules/uni-forms/components/uni-forms/utils.js
吉安PDA/uni_modules/uni-forms/components/uni-forms/validate.js
吉安PDA/uni_modules/uni-forms/package.json
吉安PDA/uni_modules/uni-forms/readme.md
吉安PDA/uni_modules/uni-group/changelog.md
吉安PDA/uni_modules/uni-group/components/uni-group/uni-group.vue
吉安PDA/uni_modules/uni-group/package.json
吉安PDA/uni_modules/uni-group/readme.md
吉安PDA/uni_modules/uni-icons/changelog.md
吉安PDA/uni_modules/uni-icons/components/uni-icons/icons.js
吉安PDA/uni_modules/uni-icons/components/uni-icons/uni-icons.vue
吉安PDA/uni_modules/uni-icons/components/uni-icons/uni.ttf
吉安PDA/uni_modules/uni-icons/components/uni-icons/uniicons.css
吉安PDA/uni_modules/uni-icons/components/uni-icons/uniicons.ttf
吉安PDA/uni_modules/uni-icons/package.json
吉安PDA/uni_modules/uni-icons/readme.md
吉安PDA/uni_modules/uni-id/changelog.md
吉安PDA/uni_modules/uni-id/package.json
吉安PDA/uni_modules/uni-id/readme.md
吉安PDA/uni_modules/uni-id/uniCloud/cloudfunctions/common/uni-id/LICENSE.md
吉安PDA/uni_modules/uni-id/uniCloud/cloudfunctions/common/uni-id/index.js
吉安PDA/uni_modules/uni-id/uniCloud/cloudfunctions/common/uni-id/package-lock.json
吉安PDA/uni_modules/uni-id/uniCloud/cloudfunctions/common/uni-id/package.json
吉安PDA/uni_modules/uni-list/changelog.md
吉安PDA/uni_modules/uni-list/components/uni-list-ad/uni-list-ad.vue
吉安PDA/uni_modules/uni-list/components/uni-list-chat/uni-list-chat.scss
吉安PDA/uni_modules/uni-list/components/uni-list-chat/uni-list-chat.vue
吉安PDA/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue
吉安PDA/uni_modules/uni-list/components/uni-list/uni-list.vue
吉安PDA/uni_modules/uni-list/components/uni-list/uni-refresh.vue
吉安PDA/uni_modules/uni-list/components/uni-list/uni-refresh.wxs
吉安PDA/uni_modules/uni-list/package.json
吉安PDA/uni_modules/uni-list/readme.md
吉安PDA/uni_modules/uni-load-more/changelog.md
吉安PDA/uni_modules/uni-load-more/components/uni-load-more/i18n/en.json
吉安PDA/uni_modules/uni-load-more/components/uni-load-more/i18n/index.js
吉安PDA/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hans.json
吉安PDA/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hant.json
吉安PDA/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue
吉安PDA/uni_modules/uni-load-more/package.json
吉安PDA/uni_modules/uni-load-more/readme.md
吉安PDA/uni_modules/uni-nav-bar/changelog.md
吉安PDA/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue
吉安PDA/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar.vue
吉安PDA/uni_modules/uni-nav-bar/package.json
吉安PDA/uni_modules/uni-nav-bar/readme.md
吉安PDA/uni_modules/uni-popup/changelog.md
吉安PDA/uni_modules/uni-popup/components/uni-popup-dialog/keypress.js
吉安PDA/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue
吉安PDA/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue
吉安PDA/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
吉安PDA/uni_modules/uni-popup/components/uni-popup/i18n/en.json
吉安PDA/uni_modules/uni-popup/components/uni-popup/i18n/index.js
吉安PDA/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json
吉安PDA/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json
吉安PDA/uni_modules/uni-popup/components/uni-popup/keypress.js
吉安PDA/uni_modules/uni-popup/components/uni-popup/popup.js
吉安PDA/uni_modules/uni-popup/components/uni-popup/uni-popup.vue
吉安PDA/uni_modules/uni-popup/package.json
吉安PDA/uni_modules/uni-popup/readme.md
吉安PDA/uni_modules/uni-scss/changelog.md
吉安PDA/uni_modules/uni-scss/index.scss
吉安PDA/uni_modules/uni-scss/package.json
吉安PDA/uni_modules/uni-scss/readme.md
吉安PDA/uni_modules/uni-scss/styles/index.scss
吉安PDA/uni_modules/uni-scss/styles/setting/_border.scss
吉安PDA/uni_modules/uni-scss/styles/setting/_color.scss
吉安PDA/uni_modules/uni-scss/styles/setting/_radius.scss
吉安PDA/uni_modules/uni-scss/styles/setting/_space.scss
吉安PDA/uni_modules/uni-scss/styles/setting/_styles.scss
吉安PDA/uni_modules/uni-scss/styles/setting/_text.scss
吉安PDA/uni_modules/uni-scss/styles/setting/_variables.scss
吉安PDA/uni_modules/uni-scss/styles/tools/functions.scss
吉安PDA/uni_modules/uni-scss/theme.scss
吉安PDA/uni_modules/uni-scss/variables.scss
吉安PDA/uni_modules/uni-search-bar/changelog.md
吉安PDA/uni_modules/uni-search-bar/components/uni-search-bar/i18n/en.json
吉安PDA/uni_modules/uni-search-bar/components/uni-search-bar/i18n/index.js
吉安PDA/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hans.json
吉安PDA/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hant.json
吉安PDA/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue
吉安PDA/uni_modules/uni-search-bar/package.json
吉安PDA/uni_modules/uni-search-bar/readme.md
吉安PDA/uni_modules/uni-segmented-control/changelog.md
吉安PDA/uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue
吉安PDA/uni_modules/uni-segmented-control/package.json
吉安PDA/uni_modules/uni-segmented-control/readme.md
吉安PDA/uni_modules/uni-transition/changelog.md
吉安PDA/uni_modules/uni-transition/components/uni-transition/createAnimation.js
吉安PDA/uni_modules/uni-transition/components/uni-transition/uni-transition.vue
吉安PDA/uni_modules/uni-transition/package.json
吉安PDA/uni_modules/uni-transition/readme.md
吉安PDA/unpackage/cache/apk/apkurl
吉安PDA/unpackage/cache/apk/cmManifestCache.json
吉安PDA/unpackage/cache/certdata
吉安PDA/unpackage/cache/cloudcertificate/certini
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/.manifest/icon-android-hdpi.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/.manifest/icon-android-xhdpi.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/.manifest/icon-android-xxhdpi.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/.manifest/icon-android-xxxhdpi.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/__uniappchooselocation.js
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/__uniapperror.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/__uniappes6.js
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/__uniappopenlocation.js
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/__uniapppicker.js
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/__uniappquill.js
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/__uniappquillimageresize.js
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/__uniappscan.js
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/__uniappsuccess.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/__uniappview.html
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/app-config-service.js
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/app-config.js
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/app-service.js
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/app-view.js
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/manifest.json
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/BC.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/CK.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/CP.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/CPCK.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/CSJ.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/FL.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/GM.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/JX.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/KCCX.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/KCPD.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/RK.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/SH.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/WMSRK.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/YM.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/ZXRK.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/center-selected.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/center.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/fail.mp3
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/favicon.ico
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/iconfont.css
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/index-selected.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/index.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/login_bottom_bg.jpg
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/login_top2.jpg
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/login_top3.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/logo.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/pp.png
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/repeat.mp3
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/static/success.mp3
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/uni_modules/uni-icons/components/uni-icons/uniicons.ttf
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/view.css
吉安PDA/unpackage/cache/wgt/__UNI__4D0008D/view.umd.min.js
吉安PDA/unpackage/res/icons/1024x1024.png
吉安PDA/unpackage/res/icons/120x120.png
吉安PDA/unpackage/res/icons/144x144.png
吉安PDA/unpackage/res/icons/152x152.png
吉安PDA/unpackage/res/icons/167x167.png
吉安PDA/unpackage/res/icons/180x180.png
吉安PDA/unpackage/res/icons/192x192.png
吉安PDA/unpackage/res/icons/20241228155440.png
吉安PDA/unpackage/res/icons/20x20.png
吉安PDA/unpackage/res/icons/29x29.png
吉安PDA/unpackage/res/icons/40x40.png
吉安PDA/unpackage/res/icons/58x58.png
吉安PDA/unpackage/res/icons/60x60.png
吉安PDA/unpackage/res/icons/72x72.png
吉安PDA/unpackage/res/icons/76x76.png
吉安PDA/unpackage/res/icons/80x80.png
吉安PDA/unpackage/res/icons/87x87.png
吉安PDA/unpackage/res/icons/96x96.png
吉安PDA/unpackage/res/icons/logo.png
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/__uniappchooselocation.js
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/__uniapperror.png
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/__uniappes6.js
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/__uniappopenlocation.js
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/__uniapppicker.js
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/__uniappquill.js
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/__uniappquillimageresize.js
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/__uniappscan.js
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/__uniappsuccess.png
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/__uniappview.html
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/app-config-service.js
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/app-config.js
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/app-service.js
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/app-view.js
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/manifest.json
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/static/center-selected.png
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/static/center.png
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/static/favicon.ico
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/static/index-selected.png
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/static/index.png
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/static/login_bottom_bg.jpg
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/static/login_top2.jpg
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/static/login_top3.png
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/static/logo.png
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/uni_modules/uni-icons/components/uni-icons/uniicons.ttf
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/view.css
吉安PDA/unpackage/resources/__UNI__BFEF6BA/www/view.umd.min.js
吉安PDA/uview-ui/LICENSE
吉安PDA/uview-ui/README.md
吉安PDA/uview-ui/components/u-action-sheet/u-action-sheet.vue
吉安PDA/uview-ui/components/u-alert-tips/u-alert-tips.vue
吉安PDA/uview-ui/components/u-avatar-cropper/u-avatar-cropper.vue
吉安PDA/uview-ui/components/u-avatar-cropper/weCropper.js
吉安PDA/uview-ui/components/u-avatar/u-avatar.vue
吉安PDA/uview-ui/components/u-back-top/u-back-top.vue
吉安PDA/uview-ui/components/u-badge/u-badge.vue
吉安PDA/uview-ui/components/u-button/u-button.vue
吉安PDA/uview-ui/components/u-calendar/u-calendar.vue
吉安PDA/uview-ui/components/u-car-keyboard/u-car-keyboard.vue
吉安PDA/uview-ui/components/u-card/u-card.vue
吉安PDA/uview-ui/components/u-cell-group/u-cell-group.vue
吉安PDA/uview-ui/components/u-cell-item/u-cell-item.vue
吉安PDA/uview-ui/components/u-checkbox-group/u-checkbox-group.vue
吉安PDA/uview-ui/components/u-checkbox/u-checkbox.vue
吉安PDA/uview-ui/components/u-circle-progress/u-circle-progress.vue
吉安PDA/uview-ui/components/u-col/u-col.vue
吉安PDA/uview-ui/components/u-collapse-item/u-collapse-item.vue
吉安PDA/uview-ui/components/u-collapse/u-collapse.vue
吉安PDA/uview-ui/components/u-column-notice/u-column-notice.vue
吉安PDA/uview-ui/components/u-count-down/u-count-down.vue
吉安PDA/uview-ui/components/u-count-to/u-count-to.vue
吉安PDA/uview-ui/components/u-divider/u-divider.vue
吉安PDA/uview-ui/components/u-dropdown-item/u-dropdown-item.vue
吉安PDA/uview-ui/components/u-dropdown/u-dropdown.vue
吉安PDA/uview-ui/components/u-empty/u-empty.vue
吉安PDA/uview-ui/components/u-field/u-field.vue
吉安PDA/uview-ui/components/u-form-item/u-form-item.vue
吉安PDA/uview-ui/components/u-form/u-form.vue
吉安PDA/uview-ui/components/u-full-screen/u-full-screen.vue
吉安PDA/uview-ui/components/u-gap/u-gap.vue
吉安PDA/uview-ui/components/u-grid-item/u-grid-item.vue
吉安PDA/uview-ui/components/u-grid/u-grid.vue
吉安PDA/uview-ui/components/u-icon/u-icon.vue
吉安PDA/uview-ui/components/u-image/u-image.vue
吉安PDA/uview-ui/components/u-index-anchor/u-index-anchor.vue
吉安PDA/uview-ui/components/u-index-list/u-index-list.vue
吉安PDA/uview-ui/components/u-input/u-input.vue
吉安PDA/uview-ui/components/u-keyboard/u-keyboard.vue
吉安PDA/uview-ui/components/u-lazy-load/u-lazy-load.vue
吉安PDA/uview-ui/components/u-line-progress/u-line-progress.vue
吉安PDA/uview-ui/components/u-line/u-line.vue
吉安PDA/uview-ui/components/u-link/u-link.vue
吉安PDA/uview-ui/components/u-loading-page/u-loading-page.vue
吉安PDA/uview-ui/components/u-loading/u-loading.vue
吉安PDA/uview-ui/components/u-loadmore/u-loadmore.vue
吉安PDA/uview-ui/components/u-mask/u-mask.vue
吉安PDA/uview-ui/components/u-message-input/u-message-input.vue
吉安PDA/uview-ui/components/u-modal/u-modal.vue
吉安PDA/uview-ui/components/u-navbar/u-navbar.vue
吉安PDA/uview-ui/components/u-no-network/u-no-network.vue
吉安PDA/uview-ui/components/u-notice-bar/u-notice-bar.vue
吉安PDA/uview-ui/components/u-number-box/u-number-box.vue
吉安PDA/uview-ui/components/u-number-keyboard/u-number-keyboard.vue
吉安PDA/uview-ui/components/u-parse/libs/CssHandler.js
吉安PDA/uview-ui/components/u-parse/libs/MpHtmlParser.js
吉安PDA/uview-ui/components/u-parse/libs/config.js
吉安PDA/uview-ui/components/u-parse/libs/handler.wxs
吉安PDA/uview-ui/components/u-parse/libs/trees.vue
吉安PDA/uview-ui/components/u-parse/u-parse.vue
吉安PDA/uview-ui/components/u-picker/u-picker.vue
吉安PDA/uview-ui/components/u-popup/u-popup.vue
吉安PDA/uview-ui/components/u-radio-group/u-radio-group.vue
吉安PDA/uview-ui/components/u-radio/u-radio.vue
吉安PDA/uview-ui/components/u-rate/u-rate.vue
吉安PDA/uview-ui/components/u-read-more/u-read-more.vue
吉安PDA/uview-ui/components/u-row-notice/u-row-notice.vue
吉安PDA/uview-ui/components/u-row/u-row.vue
吉安PDA/uview-ui/components/u-search/u-search.vue
吉安PDA/uview-ui/components/u-section/u-section.vue
吉安PDA/uview-ui/components/u-select/u-select.vue
吉安PDA/uview-ui/components/u-skeleton/u-skeleton.vue
吉安PDA/uview-ui/components/u-slider/u-slider.vue
吉安PDA/uview-ui/components/u-steps/u-steps.vue
吉安PDA/uview-ui/components/u-sticky/u-sticky.vue
吉安PDA/uview-ui/components/u-subsection/u-subsection.vue
吉安PDA/uview-ui/components/u-swipe-action/u-swipe-action.vue
吉安PDA/uview-ui/components/u-swiper/u-swiper.vue
吉安PDA/uview-ui/components/u-switch/u-switch.vue
吉安PDA/uview-ui/components/u-tabbar/u-tabbar.vue
吉安PDA/uview-ui/components/u-table/u-table.vue
吉安PDA/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue
吉安PDA/uview-ui/components/u-tabs/u-tabs.vue
吉安PDA/uview-ui/components/u-tag/u-tag.vue
吉安PDA/uview-ui/components/u-td/u-td.vue
吉安PDA/uview-ui/components/u-th/u-th.vue
吉安PDA/uview-ui/components/u-time-line-item/u-time-line-item.vue
吉安PDA/uview-ui/components/u-time-line/u-time-line.vue
吉安PDA/uview-ui/components/u-toast/u-toast.vue
吉安PDA/uview-ui/components/u-top-tips/u-top-tips.vue
吉安PDA/uview-ui/components/u-tr/u-tr.vue
吉安PDA/uview-ui/components/u-upload/u-upload.vue
吉安PDA/uview-ui/components/u-verification-code/u-verification-code.vue
吉安PDA/uview-ui/components/u-waterfall/u-waterfall.vue
吉安PDA/uview-ui/iconfont.css
吉安PDA/uview-ui/index.js
吉安PDA/uview-ui/index.scss
吉安PDA/uview-ui/libs/config/config.js
吉安PDA/uview-ui/libs/config/zIndex.js
吉安PDA/uview-ui/libs/css/color.scss
吉安PDA/uview-ui/libs/css/common.scss
吉安PDA/uview-ui/libs/css/style.components.scss
吉安PDA/uview-ui/libs/css/style.h5.scss
吉安PDA/uview-ui/libs/css/style.mp.scss
吉安PDA/uview-ui/libs/css/style.nvue.scss
吉安PDA/uview-ui/libs/css/style.vue.scss
吉安PDA/uview-ui/libs/function/$parent.js
吉安PDA/uview-ui/libs/function/addUnit.js
吉安PDA/uview-ui/libs/function/bem.js
吉安PDA/uview-ui/libs/function/color.js
吉安PDA/uview-ui/libs/function/colorGradient.js
吉安PDA/uview-ui/libs/function/debounce.js
吉安PDA/uview-ui/libs/function/deepClone.js
吉安PDA/uview-ui/libs/function/deepMerge.js
吉安PDA/uview-ui/libs/function/getParent.js
吉安PDA/uview-ui/libs/function/guid.js
吉安PDA/uview-ui/libs/function/md5.js
吉安PDA/uview-ui/libs/function/queryParams.js
吉安PDA/uview-ui/libs/function/random.js
吉安PDA/uview-ui/libs/function/randomArray.js
吉安PDA/uview-ui/libs/function/route.js
吉安PDA/uview-ui/libs/function/sys.js
吉安PDA/uview-ui/libs/function/test.js
吉安PDA/uview-ui/libs/function/throttle.js
吉安PDA/uview-ui/libs/function/timeFormat.js
吉安PDA/uview-ui/libs/function/timeFrom.js
吉安PDA/uview-ui/libs/function/toast.js
吉安PDA/uview-ui/libs/function/trim.js
吉安PDA/uview-ui/libs/function/type2icon.js
吉安PDA/uview-ui/libs/mixin/mixin.js
吉安PDA/uview-ui/libs/mixin/mpShare.js
吉安PDA/uview-ui/libs/request/index.js
吉安PDA/uview-ui/libs/store/index.js
吉安PDA/uview-ui/libs/util/area.js
吉安PDA/uview-ui/libs/util/async-validator.js
吉安PDA/uview-ui/libs/util/city.js
吉安PDA/uview-ui/libs/util/emitter.js
吉安PDA/uview-ui/libs/util/province.js
吉安PDA/uview-ui/package.json
吉安PDA/uview-ui/theme.scss
吉安PDA/vue.config.js |
